Html 如何为禁用的复选框设置 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1206960/
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
How to set CSS for disabled checkboxes?
提问by Even Mien
I'd like change the CSS for disabled checkboxes in a grid (they are too hard to see for the users). What is a simple way to do this?
我想更改网格中禁用复选框的 CSS（用户很难看到它们）。有什么简单的方法可以做到这一点？
My preference in technologies used (in descending order):
CSS
JavaScript
jQuery
Other
我对所用技术的偏好（按降序排列）：
CSS
JavaScript
jQuery
其他
回答by David says reinstate Monica
I'd suggest changing the colour of the background (the background-colorof the form/fieldset), and see if you can come up with a better contrast. If you just want to change the colour of disabled (non-selectable?) checkboxes you can try:
我建议更改背景的颜色（background-color表单/字段集的颜色），看看您是否可以提出更好的对比度。如果您只想更改禁用（不可选择？）复选框的颜色，您可以尝试：
input[disabled] {
...
/* CSS here */
...
}
But if they're disabled for a reason, surely they don't need to be prominently visible? The aim for their being greyed-out is, surely, to avoid confusion between active/enabled and inactive/disabled form elements?
但是，如果它们因某种原因被禁用，那么它们肯定不需要显眼吗？它们变灰的目的当然是为了避免活动/启用和非活动/禁用表单元素之间的混淆？
回答by David
Keep the checkbox enabled, but then add onfocus=this.blur()to the checkbox so it cannot be clicked.
保持复选框处于启用状态，然后添加onfocus=this.blur()到复选框中，使其无法被单击。
Or if using ASP.net (as you say in your comment) keep the checkbox set to enabled and add the following to the Page.Load event:
或者，如果使用 ASP.net（如您在评论中所说），请将复选框设置为启用并将以下内容添加到 Page.Load 事件中：
CheckBox1.Attributes.Add("onclick", "return false;");
回答by AdamSane
Ive had good luck with a few JS libraries to do the work. Granted my requirement was to make the boxes look very different from the standard check box. The following library is even 508 compliant.
我很幸运有几个 JS 库来完成这项工作。当然，我的要求是使这些框看起来与标准复选框非常不同。以下库甚至符合 508。
回答by Ms2ger
input:disabled {}works for every browser except—you guessed it—IE. For IE, I guess you'll have to use some JS library.
input:disabled {}适用于所有浏览器，除了——你猜对了——IE。对于 IE，我猜你必须使用一些 JS 库。
回答by dusoft
basically, you need to attach onclick event on div, p, or any other element used for a grid and then transfer the checked value into hidden element associated with that field in a grid. which is very trivial, if javascript is used - check jquery to add onclick event on any element. if clicked, set value=1 for hidden element.
基本上，您需要在 div、p 或用于网格的任何其他元素上附加 onclick 事件，然后将选中的值传输到与网格中该字段关联的隐藏元素中。这是非常微不足道的，如果使用 javascript - 检查 jquery 以在任何元素上添加 onclick 事件。如果单击，则为隐藏元素设置 value=1。
回答by 2682562
Actually with a bit CSS3 you can mock up a very simplistic solution. You will always have to consider what kind of support you want to offer. But if you are fine with it working on modern browsers, just give it a go.
实际上，通过一点 CSS3，您可以模拟一个非常简单的解决方案。您将始终必须考虑您想要提供什么样的支持。但是，如果您对它在现代浏览器上的工作感到满意，那就试一试吧。
Here's the HTML
这是 HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Here's the CSS
这是 CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
And here's the DEMO http://jsfiddle.net/DyjmM/
回答by Zeeb
If you have a form with a mix of enabled and disabled checkboxes, having the disabled checkboxes faded out avoids confusion for the user. If the intention is to display a view-only page with checkboxes (ex. to show product options selected on a purchase receipt) then replacing checkbox input elements with images may render better results.
如果您有一个混合了启用和禁用复选框的表单，将禁用的复选框淡出可以避免用户混淆。如果目的是显示带有复选框的仅查看页面（例如显示在购买收据上选择的产品选项），那么用图像替换复选框输入元素可能会产生更好的结果。
Replace
代替
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
with
和
<img src="unchecked.gif">
<img src="checked.gif">
