アンケートフォームなどで、「第一希望」「第二希望」のように複数の項目を選択してもらう際に、
同じ項目が選ばれるのを防ぎたい場合があります。
このページでは、JavaScriptを使用して、フィールド間の重複選択を動的に不可にする方法を、
プルダウンメニューとラジオボタンの2つのパターンで紹介します。
実装の概要
今回のコードでは、以下の流れで処理を行います。
2. JavaScriptで、各セレクトフィールドの変更イベント（`change`）を監視します。
3. 片方のセレクトフィールドで値が選択されたら、もう片方のセレクトフィールドで同じ値を持つ選択肢を特定し、
非活性化（`disabled`）します。
4. ページ読み込み時にもこの処理を実行し、初期状態を整えます。
注意点
データベース側での重複チェックも忘れずに
このJavaScriptによる制御は、ユーザーの入力の利便性を高めるもので、
ブラウザの設定でJavaScriptが無効になっている場合は機能しません。
その場合、重複した値がデータベースに登録されてしまう可能性があります。
これを防ぐため、必ずデータベース側でも重複をチェックする設定を行ってください。
以下に、レコードアクションを用いた設定例を示します。
■ レコードアクションの設定手順
- 重複チェックを行いたいDBの管理画面から「トリガ」タブを開き、「レコードアクション」を新規作成します。
- アクション先は「自DB」を選択します。
- 「＋」ボタンを押下し、アクション処理を新規作成します。
- 「発動条件」で「指定する」を選択します。
- 「関数条件」の「電卓マーク」をクリックし、重複をチェックしたいフィールド同士を`=`で結びます。
例：@db_name.select1 = @db_name.select2 - 「処理タイプ」で「エラー」を選択してください。
JavaScriptコード
以下のJavaScriptをページのJavaScriptタブに貼り付けてください。
'f0x'や'f0y'の部分は、お使いのフォームのフィールド名（name属性の値）に書き換えてください。
プルダウンの場合
document.addEventListener('DOMContentLoaded', function () {
const select1 = document.getElementsByName('f0x')[0];
const select2 = document.getElementsByName('f0y')[0];
if (!select1 || !select2) {
console.warn('select1またはselect2が見つかりません。');
return;
}
function updateOptions() {
const selected1 = select1.value;
const selected2 = select2.value;
Array.from(select2.options).forEach(option => {
option.disabled = (option.value && option.value === selected1);
});
Array.from(select1.options).forEach(option => {
option.disabled = (option.value && option.value === selected2);
});
}
select1.addEventListener('change', updateOptions);
select2.addEventListener('change', updateOptions);
updateOptions();
});
ラジオボタンの場合
document.addEventListener('DOMContentLoaded', function () {
const radios1 = document.getElementsByName('f0x');
const radios2 = document.getElementsByName('f0y');
function updateRadio() {
const checked1 = Array.from(radios1).find(r => r.checked)?.value;
const checked2 = Array.from(radios2).find(r => r.checked)?.value;
// 第一希望で選択中の値を第二希望で非活性化
Array.from(radios2).forEach(radio => {
radio.disabled = (checked1 && radio.value === checked1);
});
// （必要なら）逆も
Array.from(radios1).forEach(radio => {
radio.disabled = (checked2 && radio.value === checked2);
});
}
// 各ラジオボタンにイベントを設定
Array.from(radios1).forEach(radio => {
radio.addEventListener('change', updateRadio);
});
Array.from(radios2).forEach(radio => {
radio.addEventListener('change', updateRadio);
});
// 初期化
updateRadio();
});
実行結果
上記JavaScriptを設置したページを表示すると、以下のように動作します。
「第二希望」のプルダウンでは「A」が選択できなくなります。逆も同様です。
・ラジオボタン: 「第一希望」で「X」を選択すると、
「第二希望」のラジオボタンでは「X」がクリックできなくなります。逆も同様です。
まとめ
本記事では、JavaScriptを用いてフォームのフィールド間で重複選択を禁止する方法を紹介しました。
この実装により、ユーザーの入力ミスを防ぎ、より直感的で使いやすいフォームを提供できます。
少しのコードで実現できるため、ぜひご活用ください。
