如何为禁用复选框设置CSS？

Question

我想更改网格中的禁用复选框CSS（对于用户来说太难看了）。有什么简单的方法可以做到这一点？

我对所用技术的偏好（按降序排列）：
CSS结果 JavaScript的结果 jQuery的结果 其他

Answer 1

我建议更改背景的颜色（表单/字段集的 background-color ），看看是否可以提出更好的对比度。如果您只想更改已禁用（不可选？）复选框的颜色，可以尝试：

input[disabled] {
...
/* CSS here */
...
}

但如果他们因某种原因被禁用，他们肯定不需要突出显示？他们被灰色化的目的当然是为了避免混淆/启用和禁用/禁用表单元素之间的混淆？

Answer 2

保持复选框已启用，但随后将 onfocus = this.blur（）添加到复选框，以便无法点击。

或者，如果使用ASP.net（正如您在评论中所述），请将复选框设置为启用，并将以下内容添加到Page.Load事件中：

CheckBox1.Attributes.Add("onclick", "return false;");

Answer 3

我有好几个JS库来完成这项工作。我的要求是让盒子看起来与标准复选框非常不同。以下库甚至符合508标准。

样式表单控件

Answer 4

input：disabled {} 适用于除＃＆＃8212;你猜对了的所有浏览器＆＃8212; IE。对于IE，我想你将不得不使用一些JS库。

Answer 5

基本上，您需要在div，p或用于网格的任何其他元素上附加onclick事件，然后将选中的值传输到与网格中该字段关联的隐藏元素中。这是非常简单的，如果使用javascript - 检查jquery在任何元素上添加onclick事件。如果单击，则为隐藏元素设置值= 1.

Answer 6

实际上有点CSS3你可以模拟一个非常简单的解决方案。 您将始终不得不考虑您想要提供什么样的支持。 但是如果你在现代浏览器上工作得很好，就试试吧。

这是HTML

<label>
    <input type="checkbox" name="test" />
    <span>I accept terms and cons</span><br><br>
    <button>Great!</button>
</label>

这是CSS

button { display: none}
:checked ~ button {
    font-style: italic;
    color: green;  
    display: inherit;
}

这是DEMO http://jsfiddle.net/DyjmM/

Answer 7

如果您的表单中包含已启用和已禁用的复选框，则禁用已禁用的复选框可避免对用户造成混淆。如果打算显示带有复选框的仅查看页面（例如，显示在购买收据上选择的产品选项），则用图像替换复选框输入元素可能会产生更好的结果。

替换

<input type="checkbox" disabled>
<input type="checkbox" disabled checked>

与

<img src="unchecked.gif">
<img src="checked.gif">