HTML のチェックボックスを有効または無効にする
- HTML のチェックボックス
-
checked
属性を使用して、HTML でデフォルトでチェックボックスを有効にする -
disabled
属性を使用して、HTML でデフォルトでチェックボックスを無効にする
![HTML のチェックボックスを有効または無効にする](/img/HTML/feature-image---html-checkbox-disabled.webp)
この記事では、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 でチェックボックスを有効または無効にする方法です。
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn