JavaScript / CSS 編 - セレクトメニューの選択項目によりラジオボタンを無効にする

　セレクトメニューで選択させ、ある項目を選択した場合には、次の項目（この例ではラジオボタン）を無効（入力・選択不可）にしたいことはあるでしょう。次の例を試してみてください。

　セレクトメニューで「無効」を選択すると、隣のラジオボタンすべてがグレーになりチェックできなくなりますね。そして、セレクトメニューを「有効」に戻せば、ラジオボタンは白色に変わりチェックできるようになります。これは、JavaScript で実現します。それでは、実現方法をご紹介しますね。

まずは、上のフォームの HTML を見てください。次のようになっています。

<body onload="selectChange()">
・
・
・
<form name="form1"> 
  <select size="1" name="select1" onchange="selectChange()">
    <option value="1">有効</option>
    <option value="0">無効</option>
  </select>
  <input type="radio" name="radio1" value="1"> ラジオ１　
  <input type="radio" name="radio1" value="2"> ラジオ２　
  <input type="radio" name="radio1" value="3"> ラジオ３　
  <input type="submit" value="送信"> 
</form>

　HTML で重要なのは、赤字で示された各タグの名前です。form タグ内にある form1、select タグ内にある select1、input タグ内にある radio1 のことです。これらの名前は何でもいいのですが、後ほどご説明する JavaScript でフォームを制御するためのキーワードとなります。そしてもう一つ重要なのは、select タグ内にある onchange="selectChange()" です。これは、セレクトメニューで選択した際に、JavaScript の関数 selectChange() を起動しなさいという命令文です。この関数の名前も、何でも結構ですが、同じ名前で、JavaScript の関数が定義されていないとエラーが出ますので、注意してください。最後に、body タグ内に、onload="selectChange()" を忘れずに入れておく必要がありますので、あわせてご注意ください。これは、ブラウザーが HTML を読み込んだ際に JavaScript 関数 selectChange() を実行するための命令文です。

では、肝心の JavaScript 関数 selectChange() をご紹介しましょう。haed タグ内に次の JavaScript を記述します。

 1|
 2|
 3|
 4|
 5|
 6|
 7|
 8|
 9|
10|
11|
12|
13|
14|
15|
16|
17|
18|

<SCRIPT LANGUAGE="JavaScript">
<!-- 
  function selectChange() {
    var selectedNum = document.form1.select1.selectedIndex;
    var i;
    var len = document.form1.radio1.length;
    if(selectedNum == 0) {
      for(i=0;i<len;i++) {
        document.form1.radio1[i].disabled = false;
      }
    } else {
      for(i=0;i<len;i++) {
        document.form1.radio1[i].disabled = true;
      }
    }
  }
// -->
</SCRIPT>

各ラジオボタンを操作するためには、まずラジオボタンの個数を取得し、その個数分、繰り返し処理で各ラジオボタンを一づつ操作することに注目してください。以下、各ステップごとに説明します。

■ 3 行目： function selectChange() {

JavaScript の関数の宣言です。関数名は、ここでは、selectChange() としておりますが、特段、この名前でなくてはいけないわけではありません。ただし、HTML の body タグと select タグで呼び出すときの名前と同じにする必要がありますので、ご注意ください。

■ 4 行目： var selectedNum = document.form1.select1.selectedIndex;

document.form1.select1 は、このドキュメント（document）内の form1 と名づけられたフォーム内の select1 と名づけられたセレクトメニューという意味です。selectIndex は、セレクトメニューで何番目の項目が選択されているかを取得するプロパティです。これで取得された番号を変数 selectedNum に格納します。尚、selectIndex は、0 から数えます。つまり、セレクトメニューの一番上の項目が選択されている場合には、0 となります。

■ 6 行目： var len = document.form1.radio1.length;

ラジオボタンは複数個になりますが。JavaScript では配列としてアクセスできます。つまり、document.form1.radio1 は radio1 と名づけられたラジオボタン全体の配列を意味すると考えてください。そして length は、その配列の長さ、つまり格納されている要素の個数をとりだしすプロパティです。従って、document.form1.radio1.length は、radio1 と名づけられたラジオボタンの個数を意味します。この行では、変数 len に、ラジオボタンの個数を格納しています。

■ 7 行目： if(selectedNum == 0) {

セレクトメニューの 0 番目、つまり「有効」が選択された場合の条件式です。次の 8 ～ 10 行目が実行されます。

■ 8 ～ 10 行目：

for(i=0;i<len;i++) {
  document.form1.radio1[i].disabled = false;
}
disabled は、フォームオブジェクトを無効にするプロパティです。true をセットすると無効に、false をセットすると有効になります。ここでは、各ラジオボタンに対して無効にする処理を実行します。

■ 11 行目： } else {

7 行目の条件に当てはまらなかった場合、つまり、セレクトメニューで「無効」が選択された場合です。この場合、次の 12 ～ 14 行目が実行されます。

■ 12 ～ 14 行目：

for(i=0;i<len;i++) {
  document.form1.radio1[i].disabled = true;
}
各ラジオボタンを有効にします。

以上で説明は終わりです。ラジオボタンは、disable プロパティを true にした後、あえて色を変更する必要がないことに注意してください。disable プロパティーを true にするだけで、グレーになります。その他のフォームオブジェクトではグレーになりませんので、あえてグレーにしてあげたほうがいいでしょう。グレーにする方法は、次のページをご覧下さい。

尚、入力フォームが無効になった状態で、CGI に POST するとどうなるでしょうか？　答えは、何が入力されていようが、何も送信されません。