セレクトメニューやラジオボタンで選択させ、ある項目を選択した場合には、次の項目を無効（入力・選択不可）にしたいことはあるでしょう。次の例を試してみてください。
当初、ラジオボタンはどちらも選択されておりませんね。この状態では、テキストボックスは入力可能です。次に「無効」をチェックすると、隣のテキストボックスはグレーになり入力できなくなりますね。そして、「有効」にチェックを入れると、テキストボックスは白色に変わり入力できるようになります。これは、JavaScript と CSS を組み合わせて実現します。それでは、実現方法をご紹介しますね。
まずは、上のフォームの HTML を見てください。次のようになっています。
<body onload="radioChange()"> ・ ・ ・ <form name="form1"> <input type="radio" name="radio1" value="1" onclick="radioChange()">有効 <input type="radio" name="radio1" value="0" onclick="radioChange()">無効 <input type="text" name="text1"> <input type="submit" value="送信"> </form>
HTML で重要なのは、赤字で示された各タグの名前です。form タグ内にある form1、select タグ内にある radio1、input タグ内にある text1 のことです。これらの名前は何でもいいのですが、後ほどご説明する JavaScript でフォームを制御するためのキーワードとなります。そしてもう一つ重要なのは、select タグ内にある onchange="radioChange()" です。これは、ラジオボタンで選択した際に、JavaScript の関数 radioChange() を起動しなさいという命令文です。この関数の名前も、何でも結構ですが、同じ名前で、JavaScript の関数が定義されていないとエラーが出ますので、注意してください。最後に、body タグ内に、onload="radioChange()" を忘れずに入れておく必要がありますので、あわせてご注意ください。これは、ブラウザーが HTML を読み込んだ際に JavaScript 関数 radioChange() を実行するための命令文です。
では、肝心の JavaScript 関数 radioChange() をご紹介しましょう。haed タグ内に次の JavaScript を記述します。
1| 2| 3| 4| 5| 6| 7| 8| 9| 10| 11| 12| 13| 14| 15| 16| |
<SCRIPT LANGUAGE="JavaScript">
<!--
function radioChange() {
if(document.form1.radio1[0].checked == true) {
document.form1.text1.disabled = false;
document.form1.text1.style.backgroundColor='#FFFFFF';
} else if(document.form1.radio1[1].checked == true) {
document.form1.text1.disabled = true;
document.form1.text1.style.backgroundColor='#D4D0C8';
} else {
document.form1.text1.disabled = false;
document.form1.text1.style.backgroundColor='#FFFFFF';
}
}
// -->
</SCRIPT>
|
■ 3 行目： function radioChange() {
JavaScript の関数の宣言です。関数名は、ここでは、radioChange() としておりますが、特段、この名前でなくてはいけないわけではありません。ただし、HTML の body タグと ラジオボタンの input タグで呼び出すときの名前と同じにする必要がありますので、ご注意ください。
■ 4 行目： if(document.form1.radio1[0].checked == true) {
document.form1.radio1[0] は、このドキュメント（document）内の form1 と名づけられたフォーム内の radio1 と名づけられたラジオボタン群の 0 番目のラジオボタンという意味です。checked は、ラジオボタンにチェックが入っているかを取得するプロパティーですが、チェックされていれば 真（true）を、チェックされていなければ偽（false）を返します。0 番目のラジオボタンとは、有効のボタンのことです。HTML の上から数えて何番目にあるかで指定するのですが、0 番目から始まることに注意してください。この行では、「「有効」のラジオボタンがチェックされていれば」次の行からの命令を実行する条件式です。「有効」にチェックされれば、次の 5 行目と 6 行目の命令が実行されます。
■ 5 行目： document.form1.text1.disabled = false;
disabled は、フォームオブジェクトを無効にするプロパティーです。true をセットすると無効に、false をセットすると有効になります。テキストボックスを有効（入力可能）の状態にします。これだけでは色は変わりません。
■ 6 行目： document.form1.text1.style.backgroundColor='#FFFFFF';
テキストボックスの色を白色（#FFFFFF）に変更します。
■ 7 行目： } else if(document.form1.radio1[1].checked == true) {
この行は、「「無効」のラジオボタンがチェックされていれば」次の行からの命令を実装する条件式です。「無効」にチェックされれば、次の 8 行目と 9 行目の命令が実行されます。
■ 8 行目： document.form1.text1.disabled = true;
テキストボックスを無効（入力不可）の状態にします。これだけでは色は変わりません。
■ 9 行目： document.form1.text1.style.backgroundColor='#D4D0C8';
テキストボックスの色をグレー（#D4D0C8）に変更します。
■ 10 行目： } else {
この条件式は、どちらのラジオボタンもチェックされていない場合を指します。この状態は、ページをはじめて開いたときに当てはまります。次の 11 行目と 12 行目で、この状態だった場合の命令文を指定しますが、この例では、テキストボックスを入力可能としており、5, 6 行目とまったく同じです。もし、どちらもチェックされていない場合、テキストボックスを無効にしたい場合には、11 行目と 12 行目を、8, 9 行目と同じにすれば実現できます。
■ 11 行目： document.form1.text1.disabled = false;
テキストボックスを有効（入力可能）の状態にします。これだけでは色は変わりません。
■ 12 行目： document.form1.text1.style.backgroundColor='#FFFFFF';
テキストボックスの色を白色（#FFFFFF）に変更します。
以上で説明は終わりです。この例では、テキストボックスを無効にしましたが、テキストエリア、セレクトメニューでも同様です。お試しください。
尚、入力フォームが無効になった状態で、CGI に POST するとどうなるでしょうか？ 答えは、何が入力されていようが、何も送信されません。