チェックボックスに合わせてテキスト入力欄の有効・無効を切り替えると分かりやすくて便利

チェックボックスやラジオボタンを使って項目の選択を求める入力フォームでは、「あるチェックボックスに対応したテキスト入力欄」がある場合があります。
例えば以下のサンプルでは、「その他」というラベルのチェックボックスにだけ、対応するテキスト入力欄があります。
このとき、「その他」というチェックボックスにチェックが入っているときにだけ、対応するテキスト入力欄を有効(＝文字が入力できる状態)にし、チェックが入っていない場合はテキスト入力欄を無効(＝文字が入力できない状態)にしておくと便利です。

上記のサンプルでは、チェックボックスの「その他」欄にチェックを入れると、隣のテキストフォームが有効化されます。「その他」欄にチェックが入っていなければ、隣のテキストフォームは無効化され、入力できない状態になります。
このようなインターフェイスにしておけば、「『その他』項目専用の入力欄がある」という事実を見せたまま、「そこへの入力が必要なのかどうか」を示すことができ、便利です。

チェックボックスのチェック状態と連動するテキストフォームを作るHTML＋JavaScriptソース

さて、上記のように「チェックボックスのチェック状態と連動するテキストフォーム」を作る方法は、以下の通りです。わりと簡単です。
まず、HTMLを以下のように記述しておきます。ここでは、チェックボックスとテキスト入力欄を作っているだけです。

<label><input type="checkbox" name="scb1" value="on">りんご</label><br>
<label><input type="checkbox" name="scb2" value="on">みかん</label><br>
<label><input type="checkbox" name="scb3" value="on"
              onclick="connecttext('textforscb3',this.checked);">その他</label>：
<input type="text" name="othertext" id="textforscb3" value="">

上記では、

1. 「りんご」というラベルのチェックボックス (1行目)
2. 「みかん」というラベルのチェックボックス (2行目)
3. 「その他」というラベルのチェックボックス (3行目)
   • → onclick属性を使って、後からJavaScriptで作る関数connecttextを実行 (4行目)★
4. 「その他」に対応するテキストフォーム (5行目)★

……の4つを作っています。
ここでのメインは「★」記号を付けた2行です。
ラベル「その他」のチェックボックスを作るinput要素には、onclick属性を使って以下のように記述しています。

onclick="connecttext('textforscb3',this.checked);"

ここでの「textforscb3」は、対応するテキストフォームに付加したid名です。
実際にテキストフォームに加えたid名に書き換えて使って下さい。
次に、チェックボックスがクリックされたときに実行される関数「connecttext」を作ります。
以下のJavaScriptソースは、処理内容が分かりやすいように、冗長に記述しています。

function connecttext( textid, ischecked ) {
   if( ischecked == true ) {
      // チェックが入っていたら有効化
      document.getElementById(textid).disabled = false;
   }
   else {
      // チェックが入っていなかったら無効化
      document.getElementById(textid).disabled = true;
   }
}

上記で作成したconnecttext関数は、引数に2つの値を取ります。

• 1つ目(textid)は、有効・無効を切り替える対象のテキストフォームに加えたid名
• 2つ目(ischecked)は、チェックボックスのチェック状態(チェックが入っているかどうか)

です。
ここで、チェックが入っていればテキストフォームを有効化し、チェックが入っていなければテキストフォームを無効化しています。

有効化・無効化は、disabledプロパティの値を変更するだけ

テキストフォームなどの入力欄の有効・無効を切り替えるには、disabledプロパティの値を変更するだけです。
disabledプロパティに、

• 値「true」を入れれば無効化され、
• 値「false」を入れれば有効化

されます。
「trueで無効化、falseで有効化」というのは、なんとなく感覚的に変な気がするかも知れませんが(^_^;)、これはプロパティが「disabled(無効)」だからです。
「無効化するかどうか」を設定するプロパティなので、「trueで無効化、falseで有効化」というわけです。

チェックボックスのチェック状態の否定形を代入すると、スクリプトを短くできる

ちなみに、このconnecttext関数は、もっと短く以下のように書くとスマートかも知れません。

function connecttext( textid, ischecked ) {
   // チェック状態に合わせて有効・無効を切り替える
   document.getElementById(textid).disabled = !ischecked;
}

上記では、対象のテキストフォームのdisabledプロパティに、「!ischecked」を代入しています。変数名の先頭に「!」記号を付加しています。これは、「ischecked」の否定です。
変数「ischecked」には、チェックボックスがチェックされているとき「true」が、チェックされていないときに「false」が入ります。
なので、これの否定を取れば(＝「!ischecked」と書けば)、チェックボックスがチェックされているとき「false」が、チェックされていないときに「true」が入ります。
したがって、これをdisabledプロパティにそのまま代入してやれば、テキストフォームの有効化・無効化ができます。
というわけで、チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える方法でした。

なお、似たような用途の方法として、

• テキストフォームの入力に合わせて選択肢を切り替える「入力欄に対応するラジオボタンに自動でチェックを入れる」
• 有効・無効ではなく表示・非表示を切り替える「選択に応じて不要な入力欄を非表示にする」
• 入力欄ではなくボタンを無効化する「1度しか押せないボタンを作る」

という記事もありますので、ぜひご参照下さい。

(更新日：2017年06月15日)