重複送信を防ぐため、1回しかクリックできないボタンを作りたい

1度押すと無効になるボタン

1度押すと無効になるボタン

BBSの投稿ボタンやメッセージの送信ボタンなどは、複数回クリックされると同じ内容を何度も送信してしまいます。そこで、ボタンが1回クリックされた直後にそのボタンを無効状態に変化させ、2回以上はクリックできないようにしてみましょう。絶対に重複送信を防げるわけではありませんが、JavaScriptが動作する環境でなら重複送信を防げます。


 

1回だけしかクリックできないボタンの作成例

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


1回だけしかクリックできないボタンを作るソース
このような、1回クリックすると無効になるボタンはとても簡単に作れます。以下のようにHTMLとJavaScriptを記述するだけです。
<input type="button"
       value="1回クリックした後、無効になります"
       onclick="disabled = true;">
上記のソース全体はHTMLですが、onclick属性の値だけがJavaScriptです。ボタンを作るinput要素にonclick属性を加え、値にとても短いJavaScriptソース「disabled = true;」を記述しています。このJavaScriptがボタンを無効化しています。

※見やすいように3行で記述しましたが、実際には途中で改行せずに全部を1行で記述しても問題ありません。

ボタンを無効化するスクリプト
onclick属性の値に記述したJavaScriptソースは、ボタンがクリックされた際に実行されます。ここで記述した短いスクリプト「disabled = true;」は、自分自身のdisabledプロパティの値に「true」を代入する記述です。disabledプロパティは、その要素の無効状態を指定するプロパティで、値が「true」なら無効に、「false」だと有効になります。これによって、クリックされた直後にボタンを無効化できます。

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

ボタンの無効状態は解除できる方が望ましい

無効状態を元に戻せると便利

無効状態を元に戻せると便利

1回クリックしただけでずっと無効状態になると、何らかの事情で再度クリックする必要が出てきた場合に困ります。

例えばサーバ側のエラーで正しく送信されなかったので前のページに戻って再送信したい場合や、サーバ側が応答しないので再度クリックしてみたい場合などです。このような場合にボタンが無効化されたままだと、利用者側にはストレスが溜まってしまいます。

したがって、ボタンの無効状態はユーザの意思で解除できる仕様になっている方が望ましいでしょう。ページを再読込すれば再度クリック可能になるとはいえ、既にその他の入力欄に記入している内容がページの再読込後にも維持されるかどうかが分かりませんから、「再度クリックしたければページを読み込み直して」と要求するのはやや不親切です。


 

無効状態のボタンを再度クリック可能な有効状態に戻す機能の例

そこで、ボタンの無効状態を解除できる仕組みも一緒に用意してみましょう。下記のボタンは、「1回だけクリックできます」ボタンを押すと無効状態に変化しますが、隣の「制限を解除」ボタンをクリックすると再度有効状態に戻ります。


このような無効状態を解除できるボタンの作り方を次のページでご紹介いたします。