checkboxやselectの選択に応じてjavascriptでフォーム入力を制限する
チェックボックスやセレクトボックスの選択条件に応じてその先の入力を制限（解放）する方法をご紹介します。
タグ上のdisabledを把握し、javascriptで有効にしたり無効にしたりします。
id属性なら固定の1か所、class属性なら複数個所のフィールドに制限を掛ける事ができます。
checkboxの選択によりフィールド入力を制限する
アンケートフォームなどを作る際、checkboxなどの選択によって次以降の入力内容を制限したい事があると思います。
例えば項目「1」で「A」を選んだら、項目「2」から「5」までは入力ができなくなる様な形ですね。
逆に項目「1」で「B」を選んだら、項目「2」から「5」までの入力フィールドが解放されます。
フォームに入力制限を掛ける
特定のcheckboxの内容が選択されると、その入力フィールドにはカーソルも入らず一切の入力を受け付けません。
制限が解除されたら、カーソルが入る様になって自由に入力できる様になる訳です。
本記事では簡単なjavascriptを入れる事で、checkboxなどの選択条件ごとに入力制限を掛ける方法をご紹介します。
disableで有効・無効にする
入力フォームに制限を掛ける場合は、主に「disabled」を使います。
inputなどのフォームタグ内にdisabledが記述されていると、その項目にはカーソルが入らなくなり入力も一切できなくなります。
javascriptで条件を判定
設定した条件に応じてこのdisableを有効にしたり無効にしたりする事で、入力制限・解放をコントロールする訳ですね。
このdisabledがあるかどうかを判定するのにJSコードを使います。
さらに「removeAttribute」や「setAttribute」を使って、disabledを設置・削除していきます。
特定の1項目のみ入力を制限する
まずは特定の項目の入力を制限する方法です。
id属性が付けられた1つの項目に対し、disabledを設置・解除させる事になります。
id属性は1つに限定されるので、複数の入力フィールドを制限するのには向いていません。
条件によって複数の入力フィールドを一度に制限を掛けるならば、idではなくクラス名を付けてコントロールします。
HTMLソース（checkboxの場合）
<label><input class="disabled1" type="checkbox" value="" onclick="clickBtn1()">項目チェック</label> <input type="text" id="b1" value="" disabled>
下にあるinputタグには最初からdisabledが入っています。
上の「項目チェック」にチェックを付ける事でこのdisabledが無効になり、入力フィールドが解放される訳です。
入力フィールドにはid属性としてb1が設定されています。
項目チェックについている「onclick=""」イベントトリガーになり、以下のJSコードが実行されます。
JSコード
<script> function clickBtn1(){ if (document.getElementById("b1").disabled === true){ // disabled属性を削除 document.getElementById("b1").removeAttribute("disabled"); }else{ // disabled属性を設定 document.getElementById("b1").setAttribute("disabled", true); } } </script>
コードの条件分岐
idに「b1」がついたタグにdisabledが付いている場合は、disabledを除去します。
idに「b1」がついたタグにdisabledが付いていない場合は、disabledを付けます。
項目チェックのON・OFFによってこの動作を繰り返す事になりますね。
HTMLソースには最初からdisabledが入れてある訳ですが、javascriptにより「無効」にしたり「有効」にしたりできる訳です。
サンプル例
チェックを付けると、下の入力フォームの入力が解放・制限されます。
お名前：
複数の項目を一斉に制限する
上記サンプルではid属性のついた項目に制限を掛けていました。
しかし場合によっては項目「2」から項目「5」までの複数の入力フィールドに対し、一斉に制限を掛けたい場合もあると思います。
これをid属性で制御してしまうとその数だけidを割り振る事になり、個別に設置・解除の命令が必要になります。
となればそれだけコードが肥大してしまいますよね。
ちなみに複数項目に対し同じid属性を入れても、javascriptは稼働しません。
複数のフィールドがある場合はクラスを使う
このような場合に使うのが「class」属性です。
classを使えば、同じクラス名の入力フィールドに対し一発でdisabledの出し入れができる様になります。
HTMLソース（checkboxの場合）
<label><input class="disabled1" type="checkbox" value="" onclick="clickBtn2()">項目チェック</label> <input type="text" name="name1" class="disclass" value="" disabled> <input type="text" name="name2" class="disclass" value="" disabled>
項目チェックにチェックが入ったら、下にある2つの入力フィールドをいずれも入力不可にします。
両方の入力ボックスには「disclass」のクラス名を入れています。
JSコード
<script> function clickBtn2(){ let elements = document.getElementsByClassName("disclass"); let len = elements.length; if (document.getElementsByClassName("disclass")[0].disabled === true) { // disabled属性を削除 for (let i = 0; i < len; i++){ elements.item(i).removeAttribute("disabled"); } }else { // disabled属性を設定 for (let i = 0; i < len; i++){ elements.item(i).setAttribute("disabled", true); } } } </script>
コードの解説
clickBtn2が押された時、1行目でまずはdisclassのクラス名が入っている要素を全て把握します。
そして2行目でその要素の数を「len」にセットしておきます。
if条件で、disclassのクラス名がついたタグ（document）に「disabled」が有効だった（無効だった）場合の動作を指定します。
disabledの数だけ全て無効（有効）にしていく
document.getElementsByClassName("disclass")[0].disabledは、[0]を付けるところに注意して下さい。
カウントは0から始まるので、[0]で最初についたdisabledの箇所を把握しています。
「0」から始めた代数「i」が要素数のlenと同じ数になるまで、for構文を繰り返します。
この構文の中でremoveAttribute或いはsetAttributeを使って、disabledを除去（設置）していきます。
サンプル
チェックを付けると、2つの入力ボックスが両方とも解放・制限されるようになります。
このチェックで制限したいフォームに同じclass名を付けておけばコントロールできますね。
会社名：
担当者名：
複数のクラス名がある場合
制御するフォームの集まりが複数あって、それぞれ違う条件でコントロールする必要がある場合をご紹介しましょう。
クラス名を2つ（disclassとdisclass2）用意し、clickBtn1とclickBtn2とに分けます。
この時変数名が重複しない様に設定します。
JSコード
<script> function clickBtn1(){ let elements = document.getElementsByClassName("disclass"); let len = elements.length; if (document.getElementsByClassName("disclass")[0].disabled === true) { // disabled属性を削除 for (let i = 0; i < len; i++){ elements.item(i).removeAttribute("disabled"); } }else { // disabled属性を設定 for (let i = 0; i < len; i++){ elements.item(i).setAttribute("disabled", true); } } } function clickBtn2(){ let elements2 = document.getElementsByClassName("disclass2"); let len2 = elements2.length; if (document.getElementsByClassName("disclass2")[0].disabled === true) { // disabled属性を削除 for (let i2 = 0; i2 < len2; i2++){ elements2.item(i2).removeAttribute("disabled"); } }else { // disabled属性を設定 for (let i2 = 0; i2 < len; i2++){ elements2.item(i2).setAttribute("disabled", true); } } } </script>
JSコード上の各変数について
elements2…disclass2の要素を全て把握する
len2…disclass2の要素数が入る
i2…len2と同じ数までforを繰り返す参照値
3つや4つなどのクラス名が存在していても対応できると思います。
selectボックスの内容によって制限する
これまではチェックボックスを付ける事によって入力フィールドの制限を掛けていました。
次は選択形式のselectボックスで、任意の内容を選択する事で入力制限を掛けるサンプルです。
次は選択形式のselectボックスで、任意の内容を選択する事で入力制限を掛けるサンプルです。
HTMLソース
<select id="member" onchange="myfunc()"> <option value="">選択してください</option> <option value="sikakuA">資格A</option> <option value="sikakuB">資格B</option> <option value="sikakuC">資格C</option> </select> <p>資格名：<input type="text" class="disselect" value="" disabled></p> <p>取得年度：<input type="text" class="disselect" value="" disabled></p>
セレクトボックスで「資格A」を選択した時だけ、資格名と取得年度のフィールドが解放されます。
A以外の資格を選択した時は、フィールドは制限される形です。
JSコード
<script> function myfunc() { let elements = document.getElementsByClassName("disselect"); let len = elements.length; var sele_val = document.getElementById("member").value; if(sele_val === "sikakuA") { // disabled属性を削除 for (let i = 0; i < len; i++){ elements.item(i).removeAttribute("disabled"); } }else { // disabled属性を設定 for (let i = 0; i < len; i++){ elements.item(i).setAttribute("disabled", true); } } } </script>
コードの解説
制限するボックスが複数あるので、disabledを制限・解放する仕組みは前回のサンプルと同じです。
今回はボックス内の内容が変わった事がトリガーとなりますので、onchangeイベントを使います。
セレクトボックスにid属性（member）をつけて、document.getElementById("member").value;でセレクトボックス内の内容を把握しています。
ifでvalueの値が「sikakuA」だった場合に制限を解除し、それ以外だったら規制を掛けています。
サンプル
資格名：
取得年度：
資格名：
取得年度：
まとめ
いかがだったでしょうか。ご紹介したサンプルはすぐにでもコピペして使えます。
input type="text"などの入力フィールドは基本入力が自由なので、ここをトリガーにする事はあり得ないと思います。
チェックボックスやラジオボタンならonclickイベント、あとはセレクトボックスのonchangeイベントを把握しておけば問題は無いと言えます。
自作でアンケートフォームなどを作る場合は重宝しますので、ぜひ活用して下さい。
