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

2021年11月11日 16:17:10阅读数:521博客 / 蒸蒸 /

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

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    蒸蒸
    博文
    28
    粉丝
    0
    评论
    0
    访问量
    7517
    积分:0
    P豆:73.5