如何灰显html复选框？

我想使只读复选框。像这样：如何灰显html复选框？

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

我希望复选框看起来像禁用或变灰。

我怎样才能做到这一点？

2012-05-21 Roman

您还需要禁用复选框：

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

要发布的值，只需让它只读代替：

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

你可以风格复选框标签和使用CSS只读投入，例如：input [readonly =“readonly”] {}但浏览器应该使复选框在设置为只读时显示为灰色。

更新时间：

你是在浏览器的摆布造型复选框&时，在所有浏览器中一致他们的风格，你不得不求助于图像，例如：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

如果你不”吨要做到这一点（和它似乎是一个冗长的解决方案），最简单的办法是如此正确显示禁用的复选框，并张榜公布值作为隐藏输入如：

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

2012-05-21 12:14:55 FluffyKitten

color：#aaaaaa; - 是的。我需要这样的东西。但实际上这不会改变外观 – Roman

@罗曼你使用的浏览器是什么？只需设置只读属性，该复选框本身就会显示为灰色。如果您希望标签变灰，请设置CSS。看到这一点：HTTP：//jsfiddle.net/Btvpq/ – FluffyKitten

“复选框本身应该出现只是通过设置只读属性灰色” - 在IE8，FF12.0，Chrome尝试。仅适用于Chrome。 – Roman

只需将 '禁用' 属性的复选框，这样

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

2012-05-21 12:14:58 Talha

不需要添加onclick的属性 – Talha

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

的CSS

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

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

添加类readonly到要灰朦的元素：通过CSS你设置了一个opacity并改变了的风格0。然后取出内嵌JavaScript和防止默认操作上单击事件input.readonly元素

2012-05-21 12:15:43 fcalderan

这将工作，但纯HTML解决方案更容易和更可取 - 不需要JavaScript支持 – FluffyKitten

@FluffyKitten，js部分功能与OP代码相同，但没有内联javascript。 – fcalderan

不透明度：.50; - 在IE8中不起作用 – Roman

简单，CSS，只有这样，才能灰了禁用的复选框。

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

2017-03-30 18:52:43

是的，现在是一种可能的解决方案（它不是5年前问这个问题的时候）。不过需要注意的是IE11不支持css过滤器 – FluffyKitten

回答