禁用复选框单击通过CSS

是否可以通过CSS禁用checkbox点击次数。但保持checkbox的功能完好无缺所以我们可以使用Javascript动态设置它的值。我无法找到合适的解决方案。禁用复选框单击通过CSS

pointer-events:none

没有工作

来源

2014-01-22 Jacob

只有禁用设置pointer-events: none。但复选框的值仍然可以动态设置 – Jacob

您可以使用HTML - ''来实现。 – Vucko

那么什么是功能的复选框？ – NoobEditor

如果pointer-events是不是在你的浏览器不支持，那么没有，不是仅适用于CSS。

来源

2014-01-22 10:39:41 Tetaxa

问题在于'pointer-events：none'只适用于由于“指针事件”而改变值的输入。与复选框和单选按钮之类的输入在交互时改变它们的状态，而不是它们的值。不会让你的答案不正确，但是有一点可以支持，即“指针事件”可以被支持，这仍然不起作用。 – KeithS

请记住，尽管已禁用指针事件，您仍然可以将“选项卡”复选框并使用“空格”键进行切换！ – schellmax

没有，似乎可能它不会。

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

来源

2014-01-22 10:23:59 Minister

您可能需要一些JavaScript。如果你正在运行的jQuery您可以使用此为例：

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

还是一个快速和肮脏的方法，添加一个onClick属性复选框是这样的：

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

来源

2014-01-22 10:24:22

这仍然为复选框设置CSS样式，所以它看起来像被点击。 – Jacob

只是html解决方案会是怎样这个。

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

，如果你想做到这一点使用javascript

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

来源

2014-01-22 10:26:03

绿色向导不知道你的第一个解决方案只是** css ** ??在元素上设置disabled属性是一个HTML解决方案。 – Dan

我的错误@丹。编辑它。 –

哦，不用担心绿色精灵！ +1为JS解决方案:) – Dan

您可以在复选框的顶部放置一个透明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>

来源

2015-01-21 10:59:39 johanthuresson

这是可以通过复选框的点击复选框父元素:)

来源

2017-02-08 06:47:05 Tyler

禁用复选框单击通过CSS

回答

相关问题