禁止状態JavaScript入門

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

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

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


<script>

function wupBtn(){

  //名前と感想の欄のテキストを変数に代入する
  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イベントを記入し、 変更が加えられたなら関数wupBtn()を呼び出すようにしています。 ボタンは最初押せないようにdisabledを記入しておきます。

次にJavaScript部分を見ていきましょう。 最初に関数wupBtn()を作成します（wupはwake upのつもり）。

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

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

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

document.form名.elements[].disabled = true/false

trueなら禁止状態に、falseなら変更可能にする

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