にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える方法 [入力フォーム]

チェックボックスと連動するテキスト入力欄があるフォームでは、チェックボックスにチェックが入っているときにだけ対応するテキスト入力欄を有効化(=文字が入力できる状態)し、チェックが入っていない場合はテキスト入力欄を無効化(=文字が入力できない状態)すると分かりやすくて便利です。JavaScriptを使って、条件に応じて対象テキスト入力欄のdisabledプロパティの値を変えるだけで、簡単に有効化・無効化を切り替えられます。

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

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



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

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

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

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ソースは、処理内容が分かりやすいように、冗長に記述しています。

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関数は、もっと短く以下のように書くとスマートかも知れません。

JavaScriptソース

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

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

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---