Blogger Information
Blog 28
fans 0
comment 0
visits 65363
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
如何设置checkbox复选框某一个选项一直处于选中状态,不可取消选择
蒸蒸
Original
4967 people have browsed it

1.希望达到的效果:如下图,站到站一直被选中,不能被取消;鼠标置于选框上时,变成不可用状态:

2.想到的第一个办法是,给checkbox加readonly属性,发现并不能达到目的;(原因在于readonly属性关联的是页面元素的value属性(例如textbox,设置了readonly就不能修改输入框的文本内容),而复选框的勾选/取消并不改变其value属性,改变的只是一个checked状态。所以对于checkbox来说,设置了readonly,仍然是可以勾选/取消的。)

3.然后想到的是disabled,效果也不理想(这个属性的作用是设置页面元素为不可用,即不可进行任何交互操作(包括不可修改value属性、不可修改checked状态等))

4.网上查到一种可行的方法:设置onclick=”return false;” 和cursor:not-allowed

  1. <div class="label_tips">
  2. <b>服务</b>
  3. </div>
  4. <input type="checkbox" name="service[]" value="门到站">&ensp;门到站
  5. <input type="checkbox" name="service[]" value="站到站" checked style="margin-left:25px;cursor: not-allowed;" onclick="return false;">&ensp;站到站
  6. <input type="checkbox" name="service[]" value="站到门" style="margin-left:25px;">&ensp;站到门

本文参考自:https://www.jb51.net/article/40491.htm

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post