この記事では、HTMLフォームのチェックボックスの選択数に上限を設ける方法を解説します。なお、jQueryは使わずにバニラなJavaScriptで実装していきます。
完成図
次のようなチェックボックスを作成します。選択数の上限は3個で、それ以上選択できません。
無料で利用できるプログラミング学習サービスをお探しならば Code Lesson
はいかがでしょうか。プロのエンジニアが監修した学習ロードマップで効率的に学習、AIに質問、最後にクイズで理解度をチェックできます。
コード
HTMLおよびJavaScriptのコードは次のようになります。
<input type="checkbox" name="drug[]"> 覚醒剤
<input type="checkbox" name="drug[]"> 大麻
<input type="checkbox" name="drug[]"> コカイン
<input type="checkbox" name="drug[]"> ヘロイン
<input type="checkbox" name="drug[]"> MDMA
<script>
const maxChecks = 3;
const checkboxes = document.querySelectorAll('input[name="drug[]"]');
checkboxes.forEach((checkbox) => {
checkbox.addEventListener('change', () => {
const checkedCheckboxes = document.querySelectorAll('input[name="drug[]"]:checked');
if (checkedCheckboxes.length >= maxChecks) {
checkboxes.forEach((cb) => {
if (!cb.checked) {
cb.disabled = true;
}
});
} else {
checkboxes.forEach((cb) => {
cb.disabled = false;
});
}
});
});
</script>解説
const maxChecks = 3;最大選択数を設定しています。この数字を5にすれば5個まで選択できるようになります。
const checkboxes = document.querySelectorAll('input[name="drug[]"]');対象となるチェックボックスのリストを定数checkboxesに格納します。
querySelectorAll()メソッドは、指定したCSSセレクタに一致するすべての要素のリストを返します。この例では、name="drug[]"のinput要素のリストが定数checkboxesに配列として格納されます。
checkboxes.forEach((checkbox) => {
...
});checkboxes内の各要素に対して関数を一度ずつ実行します。
forEach()メソッドは、配列の各要素に対して関数を一度ずつ実行します。アロー関数を使っているのでわかりにくいですが、(checkbox) => {...}の部分が関数です。
checkbox.addEventListener('change', () => {
...
});チェックボックスが変更されたら次の関数を実行します。
checkboxにはチェックボックスのリスト(checkboxes)から取り出されたひとつひとつのチェックボックスが入っています。addEventListener()メソッドによってイベントchangeが発生すると次の関数(() => {...})が実行されます。
const checkedCheckboxes = document.querySelectorAll('input[name="drug[]"]:checked');チェック済みの要素のリストを定数checkedCheckboxesに格納しておきます。
if (checkedCheckboxes.length >= maxChecks) {
checkboxes.forEach((cb) => {
if (!cb.checked) {
cb.disabled = true;
}
});
}チェックされている要素の数が最大選択数以上ならば、チェックされていない要素を無効化します。
lengthプロパティは配列の要素の数を取得します。なので、checkedCheckboxes.lengthはチェック済み要素の数をあらわします。チェック済み要素の数(checkedCheckboxes.length)が最大選択数(maxChecks)以上ならば、以下の処理を実行します。
checkboxes.forEachですべてのチェックボックスを巡回して次の関数を実行します。
checkedプロパティは対象の要素がチェックされていればtrueを返します。なので、!cb.checkedはチェックボックスがチェックされていない場合にtrueを返します。そして、cb.disabled = true;でチェックされていない要素にdisabled属性を付加します。
else {
checkboxes.forEach((cb) => {
cb.disabled = false;
});
}チェックされている要素の数が最大数未満ならば、無効化されている要素を有効化します。
さいごに
いかがでしたでしょうか。3つまでしか選べないとしたらあなたはどれを選びますか？私は覚醒剤とコカインとMDMAです。
でわでわ
コメント