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，通过切换父对象上的类使其无法单击。像这样......

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

如果您的浏览器不支持pointer-events，则为no，而不是仅限css。

Answer 4

你可能需要一些javascript。如果你正在运行jQuery，你可以使用这个例子：

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

或者快速而脏的方法，将onClick属性添加到复选框，如下所示：

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

Answer 5

不，似乎不可能。

您可能需要隐藏它。使用 input type =“hidden”来存储信息并使用JS进行处理。

Answer 6

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

Answer 7

您可以通过jQuery执行此操作：

Out-Null

Answer 8

我在这里介绍了2种方法：https://animatedcreativity.com/blog/2020/09/14/css-disable-checbox/

您可以降低复选框的不透明度以使其看起来处于禁用状态，或使用伪元素作为掩护。

input[type="checkbox"]:nth-child(2) {
  opacity: 0.5;
  pointer-events: none;
}
input[type="checkbox"]:nth-child(3) {
  position: relative;
  pointer-events: none;
}
input[type="checkbox"]:nth-child(3):before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

<input type="checkbox" checked="checked" />
<!-- using opacity -->
<input type="checkbox" checked="checked" />
<!-- using layer -->
<input type="checkbox" checked="checked" />

Answer 9

使用JQuery：

$("input[type='checkbox']").attr("disabled","disabled")

<html>
  <head>
    disabling checkboxes
  </head>
  <body>
      <form>
        <input type="checkbox" checked="checked">
        <input type="checkbox">
        <input type="checkbox">
      </form>
  </body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

禁用通过CSS单击复选框

9 个答案: