Html 通过 CSS 禁用复选框单击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21280026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable checkbox click via CSS
提问by Jacob
Is it possible to disable checkboxclicks via CSS. But keeping the functionality of the checkboxintact So we can set its values dynamically using Javascript. I wasn't able to find a proper solution.
是否可以checkbox通过CSS. 但是保持checkbox完整的功能所以我们可以使用Javascript.动态设置它的值。我无法找到合适的解决方案。
pointer-events:none
did not work
不工作
采纳答案by Tetaxa
If pointer-eventsis not supported in your browser, then no, not with css only.
如果pointer-events您的浏览器不支持，则不支持，仅支持 css。
回答by Green Wizard
just the htmlsolution will be like this.
只是html解决方案是这样的。
<input type="checkbox" disabled="disabled" id="checkBox"/>
if you wish to do this using javascript
如果你想使用 javascript
document.getElementById("checkBox").disabled=true;
回答by johanthuresson
You can put a transparent div on top of the checkbox to make it un-clickable by toggling a class on the parent object. Something like this...
您可以在复选框顶部放置一个透明的 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>回答by Hans Westman
You probably need some javascript for this. You could use this exemple if you're running jQuery:
为此，您可能需要一些 javascript。如果您正在运行 jQuery，则可以使用此示例：
$('input[type="checkbox"]').on('click', function(ev){
ev.preventDefault();
})
Or a quick and dirty method, add an onClick attribute to the checkbox like this:
或者一个快速而肮脏的方法，向复选框添加一个 onClick 属性，如下所示：
<input type="checkbox" onClick="return false;">
回答by Minister
No, it doesn't seem possible.
不，这似乎不可能。
You may need to HIDE IT. Use input type="hidden"to store information and process it using JS.
您可能需要隐藏它。使用input type="hidden"来存储信息并使用 JS 进行处理。
回答by Tyler
This is possible by setting pointer-events: noneon a parent element of the checkbox :)
这可以通过设置pointer-events: none复选框的父元素来实现:)
