(Sample)
今回は「チェックボックスを最大3つまでしか選べないようにする」という機能の実装について解説します。
これはアンケートフォームや希望選択など、選択数を制限したい場面でよく使われる基本的なスクリプトです。新人エンジニアの皆さんも、すぐに実務で役立てられる内容ですので、じっくり理解していきましょう！
目的を簡単にいうと？
チェックボックスが5つ並んでいて、最大で3つまでしか選べないようにする。4つ目以降は選べないように無効化（disabled）するという仕組みです。
どんな構造になっているの？
HTMLの基本構造は以下のとおりです。
<input type="checkbox" id="option1" name="option" value="option1" />
<label for="option1">オプション1</label>
これが5つ繰り返されていて、どれもname="option"という共通の名前を持つチェックボックスグループです。
h2: JavaScriptで制御する部分の解説
チェックボックスの数を制限しているのが、次のスクリプトです。
function limitCheckboxes(maxLimit) {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", () => {
const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
if (checkedCount >= maxLimit) {
checkboxes.forEach(cb => {
if (!cb.checked) {
cb.disabled = true;
}
});
} else {
checkboxes.forEach(cb => cb.disabled = false);
}
});
});
}
window.onload = function () {
limitCheckboxes(3);
};
それぞれの処理の意味を説明！
| コード | 解説 |
|---|---|
querySelectorAll(...) | ページ内のすべてのチェックボックスを取得 |
addEventListener("change", ...) | チェック状態が変わったときに関数を実行 |
Array.from(...).filter(...).length | チェックされている要素の数を数える |
cb.disabled = true | チェックされていないチェックボックスを無効にする |
たとえば3つ目を選んだ瞬間に、それ以外のチェックボックスが押せなくなるようになっているわけです。
数式で理解するチェック数のロジック
実際に制限をかけている条件はこうです：
選択中のチェック数 ≥ 最大許可数（ここでは3）
つまり、
checkedCount ≥ maxLimit
この条件を満たしたら、他の未チェックの項目はdisabled = trueでクリックできなくなるというわけです。
応用例や改善ポイント
ユーザーに「あと何個選べるか」を表示
UXを良くするには、「あと○個選べます」とメッセージを表示するのもおすすめです。
エラーメッセージ表示や送信前チェック
送信ボタンを押す前に「最低1つ選んでください」などのバリデーションも追加してみましょう。
よくある質問
Q1. disabledにすると選択解除できないのでは？
→ いい質問です！実は、既にチェックされている項目はそのまま有効なので、選び直しは可能です。
チェック済みのものはcb.checked === trueなので、disabled = falseのままになっています。
Q2. ラジオボタンでも使える？
→ 使えません。ラジオボタンはそもそも1つしか選べない仕様なので、チェック数制限の制御とは役割が違います。
今後の学習の指針
この実装を通して学べることはたくさんあります。
| 技術 | 習得できる知識 |
|---|---|
| DOM操作 | 要素の取得・状態変更の方法 |
| イベント処理 | addEventListenerでのユーザー操作への反応 |
| フォーム制御 | 入力数の制限、disabled属性の扱い |
| 配列処理 | Array.from().filter()などの便利な書き方 |
さらにステップアップするには、以下も挑戦してみましょう：
- チェック数の最小数の制御
- エラーメッセージの表示
- 状態の保存（localStorageやセッション管理）
最後に
チェックボックスの選択制限は、見た目は地味でも、実はユーザー体験とデータの正確性に直結する重要な要素です。
コードの流れを一つひとつ確認しながら、「ユーザーの意図をどう反映させるか？」という視点で実装を考えるクセをつけてみてください！