HTML のチェックボックスを有効または無効にする

1. HTML のチェックボックス
2. checked 属性を使用して、HTML でデフォルトでチェックボックスを有効にする
3. disabled 属性を使用して、HTML でデフォルトでチェックボックスを無効にする

この記事では、HTML でチェックボックスを有効または無効にする方法について説明します。

HTML のチェックボックス

チェックボックスは、肯定または否定を示すために切り替えることができるインタラクティブなボックスです。 フォームやダイアログ ボックスで広く使用されています。

チェックボックスは、いくつかのオプションがある場合に使用され、ユーザーはゼロを含む任意の数のオプションを自由に選択できます。 つまり、1つをオンにしても、他のオプションが自動的にオフになるわけではありません。

チェックボックスは主に、相互に排他的でないオプションがある場合に使用されます。 切り替えることができる各オプションの横に小さなボックスが表示されます。

デフォルトでは、ボックスは空です。 空のボックスは否定、またはユーザーがオプションを選択しなかったことを示します。

クリックすると、ボックス内にチェックマークが表示されます。 チェックマークは肯定を示します。

もう一度クリックすると、チェックマークが消えます。

<input> タグを使用し、その type 属性を checkbox に設定して、HTML でチェックボックスを作成できます。 <input>タグの後に項目名を記述できます。

たとえば、ul タグを使用して順序なしリストを作成し、style を list-style: none; に設定します。 リスト項目に箇条書きが表示されないようにします。 4つのリスト アイテムを作成し、<input type="checkbox"> を使用して各リスト アイテムのチェックボックスを作成します。

コード例:

<ul style="list-style: none;">
    <li><input type="checkbox">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox">Repeat</li>
</ul>

各リスト項目のデフォルトでは、それぞれのチェックボックスにトグル機能があります。

checked 属性を使用して、HTML でデフォルトでチェックボックスを有効にする

オプションがデフォルトで常にチェックされているチェックボックスが必要な場合は、<input> タグに属性を実装できます。 使用する属性は checked 属性です。

デフォルトでチェックされるようにするには、属性の値を checked に設定するだけです。

たとえば、Drink および Repeat オプションの場合、属性 checked を追加し、その値を "checked" に設定します。 これにより、これら 2つの値のチェックボックスがデフォルトでオンになっていることが確認されます。

コード例:

<ul style="list-style: none;">
    <li><input type="checkbox" checked="checked">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked="checked">Repeat</li>
</ul>

チェックしたオプションは、クリックするだけでいつでもオフに切り替えることができます。

checked を単独で使用して同じ出力を取得することもできます。

コード例:

<ul style="list-style: none;">
    <li><input type="checkbox" checked>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked>Repeat</li>
</ul>

disabled 属性を使用して、HTML でデフォルトでチェックボックスを無効にする

HTML でデフォルトでチェックボックスを無効にするには、disabled という属性を使用できます。 disabled 属性の値を disabled に指定すると、ユーザーはチェックボックスをチェックできなくなります。

次の例を考えてみましょう。

コード例:

<ul style="list-style: none;">
    <li><input type="checkbox" disabled="disabled">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled="disabled">Repeat</li>
</ul>

出力から、4つのオプションのうち 2つだけがトグル機能を備えていることが明らかです。 Eat と Code はチェック マークを表示するように切り替えることができますが、Drink と Repeat はできません。

オプション Drink と Repeat はデフォルトで無効になっています。 Drink および Repeat オプションの横にあるチェックボックスをクリックしても、チェックボックスはクリックに反応しません。

これにより、4つのオプションのうち 2つだけがチェック可能になります。

disabled を単独で使用しても同じ結果が得られます。

コード例:

<ul style="list-style: none;">
    <li><input type="checkbox" disabled>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled>Repeat</li>
</ul>

したがって、これらは HTML でチェックボックスを有効または無効にする方法です。