無効なチェックボックスのCSSを設定する方法は？

Question

グリッド内の無効なチェックボックスのCSSを変更したいと思います（ユーザーには表示が難しい）。これを行う簡単な方法は何ですか？

（降順で）使用される技術での私の好み：
CSS
JavaScriptを
jQueryの
その他

Answer 1

私は、バックグラウンド（フォーム/フィールドセットのbackground-color）の色を変えることを提案し、あなたがより良いコントラストを考え出すことができるかどうかを確認したいです。

input[disabled] { 
... 
/* CSS here */ 
... 
} 

をしかし、彼らは理由無効になっている場合、確かに彼らが目立つように表示されている必要はありません。あなただけの無効（？非選択）チェックボックスの色を変更したい場合は、試すことができますか？グレーアウトされた目的は、アクティブ/有効と無効/無効のフォーム要素の混乱を避けることです。すべてのブラウザのため

Answer 2

アイブ氏は、仕事をするために、いくつかのJSライブラリと幸運を持っていました。私の要求は、ボックスを標準のチェックボックスと大きく異なるようにすることでした。次のライブラリは508準拠のライブラリです。

Styled Form Controls

Answer 3

基本的に、あなたはDIV、P、またはグリッドのために使用される任意の他の要素にonclickのイベントを添付して、グリッドにそのフィールドに関連付けられている隠された要素にチェックインした値を転送する必要があります。 javascriptが使用されている場合は非常に些細なことです。jQueryをチェックして、onclickイベントを任意の要素に追加します。クリックされた場合は、隠し要素に値1を設定します。

Answer 4

input:disabled {}作品を除いて、あなたは、IEそれを推測しました。 IEの場合は、JSライブラリを使用する必要があります。

Answer 5

は、チェックボックスを有効にしてください、それをクリックすることはできませんので、その後のチェックボックスにonfocus=this.blur()を追加します。

または（あなたがあなたのコメントで言うように）ASP.netを使用すると、Page.Loadイベントに次の有効に設定するチェックボックスを維持し、追加した場合：あなたがミックスを使用してフォームを持っている場合は

CheckBox1.Attributes.Add("onclick", "return false;"); 

Answer 6

有効または無効のチェックボックスがオフになっているため、チェックボックスがフェードアウトするとユーザーが混乱することはありません。チェックボックス付きの表示専用ページ（購入レシート上で選択された製品オプションを表示するなど）を表示する場合は、チェックボックスの入力要素を画像に置き換えると、より良い結果が得られる場合があります。

実際にビットCSS3を使用すると、非常に単純な解決策をモックアップすることができます

<img src="unchecked.gif"> 
<img src="checked.gif"> 

Answer 7

で

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

を交換してください。 あなたはいつもあなたが提供したいサポートの種類を考慮する必要があります。 しかし、現代のブラウザで作業しているのであれば、ちょっとしたことをしてください。

は、ここでHTML

<label> 
    <input type="checkbox" name="test" /> 
    <span>I accept terms and cons</span><br><br> 
    <button>Great!</button> 
</label> 

はここ

button { display: none} 
:checked ~ button { 
    font-style: italic; 
    color: green; 
    display: inherit; 
} 

そして、ここではDEMO http://jsfiddle.net/DyjmM/