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

【问题标题】：How to set CSS for disabled checkboxes?如何为禁用的复选框设置 CSS？
【发布时间】：2010-11-15 11:18:24
【问题描述】：

我想更改网格中禁用复选框的 CSS（用户很难看到它们）。有什么简单的方法可以做到这一点？

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

【问题讨论】：

【解决方案1】：

实际上，您可以使用一点 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;
}

【讨论】：

【解决方案2】：

如果您有一个混合了启用和禁用复选框的表单，让禁用的复选框淡出可以避免用户混淆。如果打算显示带有复选框的仅查看页面（例如，显示在购买收据上选择的产品选项），则将复选框输入元素替换为图像可能会产生更好的结果。

替换

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

与

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

【讨论】：

【解决方案3】：

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

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

但如果它们因某种原因被禁用，那么它们肯定不需要显眼吗？当然，将它们设为灰色的目的是避免在活动/启用和非活动/禁用表单元素之间产生混淆？

【讨论】：

我们无法在 CSS 中执行此操作，因为我们的用户群使用的是 IE。然而，我们以编程方式在 .NET 中的复选框控件上执行此操作。
@Even Mien：如果你能说出你是如何做到这一点的就好了，即你设置了什么属性。
@Christopher 请在下面查看我的答案，了解执行此操作的 ASP.Net 代码。
我认为更正确的方法是输入[disabled="disabled"]{}
@DavidsaysreinstateMonica：“但如果他们因某种原因被禁用，他们肯定不需要显眼吗？”当您想让用户了解任务完成的进度时，其中任务的完成涉及用户手动选中框以外的其他内容，以及当您想使用值绑定到带有 javascript 的状态对象来执行此操作时框架，这似乎是能够自定义禁用复选框外观的有效时间。显然还有其他方法可以做到这一点，但我喜欢使用检查输入的想法。

【解决方案4】：

使复选框保持启用状态，但随后将onfocus=this.blur() 添加到复选框，使其无法被点击。

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

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

【讨论】：

【解决方案5】：

input:disabled {} 适用于所有浏览器，除了——你猜对了——IE。对于 IE，我猜你必须使用一些 JS 库。

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

我很幸运有几个 JS 库来完成这项工作。当然，我的要求是使这些框看起来与标准复选框非常不同。以下库甚至符合 508 标准。

【讨论】：