通过 CSS 禁用复选框单击答案

【问题标题】：Disable checkbox click via CSS通过 CSS 禁用复选框单击
【发布时间】：2014-02-12 08:09:00
【问题描述】：

是否可以通过CSS 禁用checkbox 点击。但是保持checkbox 的功能不变所以我们可以使用Javascript 动态设置它的值。我无法找到合适的解决方案。

pointer-events:none

没用

【问题讨论】：

只禁止点击复选框。但是复选框的值仍然可以动态设置
您可以使用 HTML - <input type="checkbox" disabled >。
那么复选框的functionality 是什么？？？？
使用 disabled="disabled" html 属性
+10 NoobEditor .. 好问题 ..

标签： html css checkbox

【解决方案1】：

只是html 的解决方案会是这样的。

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

如果您希望使用 javascript 执行此操作

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

【讨论】：

Green Wizard 不确定您的第一个解决方案如何只是 css？在元素上设置 disabled 属性是一种 HTML 解决方案。
哦，不用担心绿精灵！ +1 为 JS 解决方案 :)

【解决方案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>

【讨论】：

【解决方案3】：

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

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

或者一个快速而肮脏的方法，像这样在复选框中添加一个 onClick 属性：

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

【讨论】：

这仍然会设置复选框的 CSS 样式，因此看起来像是被点击了。
我需要防止它不受约束。刚刚在您的解决方案中添加了选中的属性，它就可以工作了。为此 +1。

【解决方案4】：

如果您的浏览器不支持pointer-events，则不支持，仅css不支持。

【讨论】：

问题是pointer-events:none 仅适用于由于“指针事件”而更改值的输入。复选框和单选按钮等输入在与之交互时会更改其状态，而不是其值。不会使您的答案不正确，但有一点需要注意，pointer-events 可以得到支持，但这仍然行不通。
请记住，尽管禁用了指针事件，您仍然可以“制表”到复选框并使用“空格”键切换它！

【解决方案5】：

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

【讨论】：

【解决方案6】：

我在这里介绍了两种方法：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" />

【讨论】：

【解决方案7】：

你可以通过 jQuery 做到这一点：

$('.element-view'.attr('disabled', true);

【讨论】：

这没有使用 CSS。

【解决方案8】：

使用 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】：

不，这似乎不可能。

您可能需要隐藏它。使用 input type="hidden" 存储信息并使用 JS 处理。

【讨论】：