Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える

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



上記のサンプルでは、チェックボックスの「その他」欄にチェックを入れると、隣のテキストフォームが有効化されます。「その他」欄にチェックが入っていなければ、隣のテキストフォームは無効化され、入力できない状態になります。

このようなインターフェイスにしておけば、「『その他』項目専用の入力欄がある」という事実を見せたまま、「そこへの入力が必要なのかどうか」を示すことができ、便利です。

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

さて、上記のように「チェックボックスのチェック状態と連動するテキストフォーム」を作る方法は、以下の通りです。わりと簡単です。

まず、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. 「りんご」というラベルのチェックボックス
  2. 「みかん」というラベルのチェックボックス
  3. 「その他」というラベルのチェックボックス(onclick属性を使って後で作る関数「connecttext」を実行)★
  4. 「その他」に対応するテキストフォーム★

……の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プロパティにそのまま代入してやれば、テキストフォームの有効化・無効化ができます。

というわけで、チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える方法でした。

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

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど