如何灰顯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

回答