欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何设置checkbox复选框某一个选项一直处于选中状态,不可取消选择

程序员文章站 2022-03-13 12:37:29
...

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

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