【ホームページ作成】1回クリックすると無効になるボタンを作る

BBSの投稿ボタンやメッセージの送信ボタンなどは、複数回クリックされると同じ内容を何度も送信してしまいます。 そこで、ボタンが1回クリックされたときにそのボタンを無効状態に変化させ、それ以上はクリックできないようにしてみましょう。 それによって、重複送信をある程度は防ぐことができます。
※JavaScriptが使えない場合は、状態を変化させられないため、防げません。

1回だけクリックできるボタン

下記のボタンをクリックしてみて下さい。1度クリックするとボタンが無効になり、それ以上クリックできなくなります。 （再度クリック可能にするには、ページを読み込み直す必要があります。）

このような、1回クリックすると無効になるボタンは、非常に簡単に作れます。 以下のように記述するだけです。

上記ソースでは、ボタンを作るinput要素にonclick属性を加え、値に短いJavaScriptソース「disabled = true;」を記述しています。

onclick属性の値として記述したJavaScriptは、（ボタンが）クリックされた直後に実行されます。
ここで記述したスクリプト「disabled = true;」は、自分自身のdisabledプロパティの値に「true」を代入するものです。 disabledプロパティは、オブジェクトの有効・無効を指定するプロパティです。値が「true」だと無効に、「false」だと有効になります。
これによって、クリック直後にボタンを無効にできます。

たったこれだけの記述で、「1回クリックすると無効になる」ボタンを作ることができます。

無効状態を解除できるようにする

上記のまま使っても構わないのですが、何らかの原因で再度クリック（再送信）する必要が出てきた場合に少し困ります。 そこで、送信ボタンの無効状態を解除できる仕組みも一緒に用意してみましょう。
下記のボタンは、「1回だけクリックできます」ボタンを1回クリックすると無効状態になりますが、「制限を解除」ボタンをクリックすると有効状態に戻ります。

このようなボタンの作り方を、次のページでご紹介いたします。

無効状態を解除できる機能を作る方法へ >>