フォームの入力・選択禁止状態をJavaScriptで操作する

禁止状態

いきなりですが、下のボタンを押してみてください。

ボタンを押すと、淡い色に変化してもう押せなくなったと思います。 ２度押しされると困るような時に使うことができます。 このようにフォームの要素を使用できない状態にする方法について調べてみることにしましょう。

禁止状態のサンプルスクリプト

下の例は、名前と感想を記入してもらったらボタンが押せるようになるスクリプトです。 では、以下のソースをHTMLのbody内に記入してみましょう。

<form name="send">
お名前：<input type="text" value="" onchange="ro()"><br>
感　想：<textarea rows="2" cols="20" onchange="ro()">
</textarea><br>
<input type="button" value="送信" disabled>
</form>


<script type="text/javascript">
<!--

function ro(){

  //名前と感想の欄のテキストを変数に代入する
  var Namae = document.send.elements[0].value;
  var Kanso = document.send.elements[1].value;
  
  //名前若しくは感想欄のどちらかが空かチェック
  if ((Namae == "") || (Kanso == ""))
  {
    //どちらか空であれば、ボタンを押せなくする
    document.send.elements[2].disabled=true;
  }else{
    //両方とも書き込まれていたら、ボタンを押せるようにする
    document.send.elements[2].disabled=false;
  } 
}

// -->
</script>

以下はサンプルです。ちなみにボタンを押しても何も起こりません。

サンプル

disabledの解説

では上記スクリプトについて見ていきましょう。 まずフォーム名は「send」にしています。 テキストボックスとテキストエリアにはonchangeイベントを記入し、 変更が加えられたなら関数ro()を呼び出すようにしています。 ボタンは最初押せないようにdisabledを記入しておきます。

次にJavaScript部分を見ていきましょう。 最初に関数ro()を作成します。（因みにReadOnlyのつもりで「ro」にしたのですが、 よく考えれば今回禁止状態にするのはテキストエリアではなくボタンでした。 ボタンでReadOnlyは変ですね（汗））

関数の中で始めに、変数Namaeと変数Kansoを宣言し、 テキストボックスとテキストエリアの文字列を代入しています。 テキストエリアの文字列もvalueで取得できます。

そしてif文で、名前欄若しくは感想欄のどちらかが空かチェックします。 中央の「||」は「or」の意味でした。

どちらかが空であればボタンを押せなくし、そうでなければボタンを押せるようにします。 禁止状態のON/OFFはdisabledを使います。

禁止状態：document.form名.elements[].disabled=true/false

trueであれば禁止状態に、falseであれば入力・選択可能状態になります。

因みにこのページの最初に出てきた「2度押しできないボタン」は、 ボタンのonclickイベントで自身を禁止状態にすれば実現できます。

ページトップへ

前へ　 INDEXへ　 次へ