BBSの投稿ボタンやメッセージの送信ボタンなどは、複数回クリックされると同じ内容を何度も送信してしまいます。そこで、ボタンが1回クリックされたときにそのボタンを無効状態に変化させ、それ以上はクリックできないようにしてみましょう。それによって、重複送信をある程度は防ぐことができます。
※JavaScriptが使えない場合は、状態を変化させられないため、防げません。
1回だけクリックできるボタン
下記のボタンをクリックしてみて下さい。1度クリックするとボタンが無効になり、それ以上クリックできなくなります。（再度クリック可能にするには、ページを読み込み直す必要があります。）
このような、1回クリックすると無効になるボタンは、非常に簡単に作れます。以下のように記述するだけです。
onclick='disabled = true;'>
上記ソースでは、ボタンを作るinput要素にonclick属性を加え、値に短いJavaScriptソース「disabled = true;」を記述しています。
onclick属性の値として記述したJavaScriptは、（ボタンが）クリックされた直後に実行されます。
ここで記述したスクリプト「disabled = true;」は、自分自身のdisabledプロパティの値に「true」を代入するものです。 disabledプロパティは、オブジェクトの有効・無効を指定するプロパティです。値が「true」だと無効に、「false」だと有効になります。
これによって、クリック直後にボタンを無効にできます。
たったこれだけの記述で、「1回クリックすると無効になる」ボタンを作ることができます。
無効状態を解除できるようにする
上記のまま使っても構わないのですが、何らかの原因で再度クリック（再送信）する必要が出てきた場合に少し困ります。そこで、送信ボタンの無効状態を解除できる仕組みも一緒に用意してみましょう。
下記のボタンは、「1回だけクリックできます」ボタンを1回クリックすると無効状態になりますが、「制限を解除」ボタンをクリックすると有効状態に戻ります。
このようなボタンの作り方を、次のページでご紹介いたします。
無効状態を解除できるようにする
ボタンの無効状態を解除できる仕組みは、以下のようにHTMLとJavaScriptを記述することで作れます。
上記のソースは、先ほどのボタンに加えて、制限解除用のボタンを作っています。また、フォームとボタン（form要素とinput要素）にname属性を使って名称を付加しています。
前ページでご紹介したように、ボタンを無効化するときは「自分自身のdisabledプロパティ」の値を変更すればよいので「 disabled = (値); 」という短い記述で済みました。しかし、有効に戻すときは「自分自身のdisabledプロパティ」ではなく「隣のボタンのdisabledプロパティ」の値を変更しなければならないため、「 disabled 」という記述だけでは変更できません。
ここでは、次のように記述します。
document.(フォーム名).(オブジェクト名).disabled = false;
上記のソースでは、フォーム名はform要素のname属性の値ですから「orange」です。オブジェクト名（＝ここではボタン名）はinput要素のname属性の値ですから「apple」です。
したがって、以下のようになります。
document.
orange.
apple.disabled = false;
orange.
apple.disabled = false;
このプロパティの値として「false」を指定することで、無効状態を解除することができます。
上記のソースを表示させると、以下のように見えます。
「1回だけクリックできます」ボタンをクリックするとすぐに無効になり、重複してクリックはできなくなります。しかし、隣の「制限を解除」ボタンをクリックすると、無効状態が解除され、再度クリックできるようになります。
前のスレッド ：LANケーブルとルータを用意しよう... || 次のスレッド ：ユニークで強力なタイトルをつける...