禁用通过CSS单击复选框

Question

是否可以通过禁用checkbox点击次数CSS.但保持checkbox完整的功能所以我们可以动态设置其值Javascript.我无法找到合适的解决方案.

pointer-events:none

不工作

Answer 1

只是html解决方案将是这样的.

<input type="checkbox" disabled="disabled" id="checkBox"/>

如果你想这样做的话 javascript

document.getElementById("checkBox").disabled=true;

Answer 2

您可以在复选框的顶部放置一个透明div,通过切换父对象上的类使其无法单击.像这样......

.container{
  position:relative;
  display:block;

}
.cover{
  width:100%;
  height:100%;
  background:transparent;
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  display:none;

}

.container.disable-checkbox .cover{
  display:block;
}

<div class="container">
  <div class="cover"></div>
  <input type="checkbox"/> "clickable"

</div>
<div class="container disable-checkbox">
  <div class="cover"></div>
  <input type="checkbox"/> "un-clickable"
</div>

Answer 3

如果pointer-events浏览器不支持,则不,不支持css.

Answer 4

您可能需要一些JavaScript。如果您正在运行jQuery，则可以使用以下示例：

$('input[type="checkbox"]').on('click', function(ev){
    ev.preventDefault();
})

还是一种快速而肮脏的方法，将onClick属性添加到复选框中，如下所示：

<input type="checkbox" onClick="return false;">

Answer 5

这可以通过设置pointer-events: none复选框的父元素来实现:)