javascript - HTMLチェックボックスをグレーアウトするには?

Question

読み取り専用のチェックボックスを作りたい。このような：

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

チェックボックスが無効またはグレー表示されているように見せたい。

これどうやってするの？

score 24 · Accepted Answer

チェックボックスも無効にする必要があります。

<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" />

score 6 · Accepted Answer

このようにチェックボックスに「無効」属性を追加するだけです

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

score 6 · Accepted Answer

無効なチェックボックスをグレーアウトするシンプルな css のみの方法。

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

score 4 · Accepted Answer

$('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ます。input.readonly次に、インライン JavaScript を削除し、クリックイベントでの要素のデフォルトアクションを防止します。

4 に答える 4