javascript - 如何使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"] {} 但浏览器应使复选框在设置为只读时显示为灰色。

更新：

在设置复选框样式并在所有浏览器中一致地设置它们的样式时，您会受到浏览器的支配，您必须求助于图像，例如：https ://archive.is/TNUH1

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

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

Answer 2

只需像这样在复选框上添加“禁用”属性

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

Answer 3

简单的，仅 css 的方法来灰显禁用的复选框。

input[type=checkbox][disabled] {
    filter: invert(25%);
}

Answer 4

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="readonly">

readonly向要变灰的元素添加一个类：通过 css 设置opacity并更改cursor. 然后删除内联 javascript 并阻止input.readonlyclick 事件上元素的默认操作