如何灰显html复选框？

Question

我想制作只读复选框。像这样：

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

我希望复选框看起来像已禁用或显示为灰色。

我该怎么做？

Answer 1

您还需要禁用该复选框：

<input type="checkbox" onclick="return false;" disabled="disabled">

要发布该值，只需将其设为只读：

<input type="checkbox" onclick="return false;" readonly="readonly">

您可以使用CSS设置复选框标签和只读输入的样式，例如：input [readonly =“readonly”] {}但是当设置为readonly时，浏览器应该使复选框显示为灰色。

<强>更新

当样式复选框和＆amp ;;时，您将受浏览器的支配。要在所有浏览器中一致地设置它们，您必须使用图像，例如：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

如果您不想这样做（并且它看起来像是一个冗长的解决方案），最简单的解决方案是禁用复选框以使其正确显示，并将值作为隐藏输入发布，例如：

<input type="checkbox" onclick="return false;" disabled="disabled">
<input type="hidden" name="checkboxval" value="111" />

Answer 2

<input type="checkbox" class="readonly">

的CSS

input.readonly {
   opacity : .50;
   filter  : alpha(opacity=50); /* IE<9 */
   cursor  : default;
}

JS

$('input.readonly').on('click', function(evt) {
   evt.preventDefault();
}

将类readonly添加到要灰显的元素：通过css设置opacity并更改cursor的样式。然后删除内联javascript并阻止点击事件

上的input.readonly元素的默认操作

Answer 3

只需在此复选框上添加“已禁用”属性

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

Answer 4

简单的，仅限css的灰色禁用复选框的方法。

.script