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

Question

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

我希望使用的技术（按照降序排列）：
CSS
JavaScript
jQuery
其他

- Even Mien

---

请更加详细地说明，您需要JavaScript的解决方案吗？ - dusoft

Answer 1

我建议更改背景颜色（表单/字段集的background-color），并尝试提高对比度。如果您只想更改禁用（不可选择的）复选框的颜色，可以尝试以下方法：

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

但是如果它们被禁用的原因，那么它们肯定不需要显眼地显示出来？它们被淡化的目的是为了避免活动/启用和非活动/禁用表单元素之间的混淆，这应该是显而易见的。

- David Thomas

---

我们不能在CSS中实现这一点，因为我们的用户群正在使用IE。然而，我们在.NET的复选框控件上进行了程序化操作。 - Even Mien

@Even Mien：如果您能说一下您是如何做到这一点的，即您设置了哪个属性，那就太好了。 - Christopher Edwards

@Christopher，请查看下面的ASP.Net代码以执行此操作。 - David

我相信更正确的方式是 input[disabled="disabled"]{}。 - mynameistechno

@Duncan：在XHTML中是这样的，但在HTML中我还是错了...唉。两分钟后，我会编辑的。=/ 属性的存在就足够了（因为在大多数情况下，其存在足以表示元素被禁用）。谢谢你的指出，如果没有你的评论，我永远不会回来看这个问题。 :) - David Thomas

@DavidsaysreinstateMonica：“但如果它们被禁用是有原因的，那么它们肯定不需要显眼地显示？”当您想要向用户提供任务完成进度的感觉，并且任务的完成涉及除用户手动勾选框之外的其他内容，并且当您想要使用值绑定到具有JavaScript框架的状态对象时，似乎是一个有效的时间来自定义禁用复选框的外观。显然还有其他方法可以实现这一点，但我喜欢使用检查输入的想法。 - jbobbins

Answer 2

保持复选框处于启用状态，但是在复选框中添加onfocus=this.blur()，这样就无法单击该复选框。

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

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

- David

---

@Blue Steel：根据用户提出的问题，他要求CSS解决方案——“如何设置禁用复选框的CSS？” - IT ppl

@IT人员：他在上面的评论中更改了要求，说他不能使用CSS，而需要通过编程来完成。他还提到他正在使用ASP.Net复选框。 - David

很高兴你在这么长的时间后终于回复了。 - IT ppl

@IT人士：哈哈！我刚刚收到了你昨天的评论的电子邮件通知！看起来通知系统出现了故障或其他问题。 - David

Answer 3

我使用了几个JavaScript库来完成这项工作，效果不错。当然，我的要求是让复选框的外观与标准复选框非常不同。以下库甚至符合508条款。

样式化表单控件

- AdamSane

Answer 4

input:disabled {}适用于除IE之外的所有浏览器。对于IE，我猜您将不得不使用一些JS库。

- Ms2ger

---

是的，我肯定需要IE，因为那是我用户群的100%。 - Even Mien

Answer 5

基本上，您需要在 div、p 或用于网格的任何其他元素上附加 onclick 事件，然后将选中的值转移到与该网格中该字段关联的隐藏元素中。如果使用 JavaScript，则非常琐碎-检查 jQuery 是否添加了任何元素的 onclick 事件。如果单击，则为隐藏元素设置 value=1。

- dusoft

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;
}

这里是演示 http://jsfiddle.net/DyjmM/

- 2682562

---

虽然这很酷，但与此问题无关。他想知道如何更改禁用复选框的外观，而这篇文章根本没有解决这个问题。 - Shadow The Spring Wizard

那真是太好了！ - 2682562

Answer 7

如果您的表单中既有启用的复选框又有禁用的复选框，将禁用的复选框淡化显示可以避免用户混淆。如果意图是显示一个只读页面并带有复选框（例如，在购买收据上显示所选产品选项），则用图像替换复选框输入元素可能会产生更好的效果。

替换

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

使用

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

- Zeeb