1度しか押せないボタンを作る

BBSやメールフォームなどの「投稿(送信)」ボタンは、何度も連打されると困ることがあります。BBSに同じ内容が連続送信されてしまうと後から消す作業が面倒ですし、同じ内容のメッセージが何通もメールで届くと件数の把握が面倒になってしまいますし。
そんなときには、投稿(送信)ボタンを1度しかクリックできなくする方法がよく使われています。
例えば以下のようなボタンです。見た目は普通のボタンですし、普通の操作でクリック可能ですが、一度クリックすると無効化され、二度は押せなくなります。

上記の2つのボタンはどちらも、クリックするとそのボタンが無効になるので、ページを再読込するまで再度クリックはできなくなります。
つまり、1度しか押せないわけです。

1度しか押せないボタンを作る方法(背景の説明)

input要素で作るボタンには、disabled属性が使えます。例えば、HTMLで以下のように記述すると「最初から無効状態のボタン」が表示されます。

<input type="button" value="最初から無効(disabled)状態なボタン" disabled>

このdisabled属性をJavaScriptから設定してやれば、動的にボタンを無効化できます。
見た目は以下のような感じです。

これを利用して、ボタンがクリックされたタイミングで、そのボタンのdisabled属性を設定すれば、1度クリックしたら無効になるボタン(＝つまり1度しか押せないボタン)ができます。

1度しか押せないボタンを作るJavaScriptソースの簡単な書き方

ボタンを無効にしてクリックできなくするには、以下のようなJavaScriptを使います。

(対象のボタン要素).disabled = true;

対象のボタンを作っている要素に対して、disabledプロパティの値を「true」にするだけです。これで、そのボタンは使えなくなります。
この処理を、「ボタンがクリックされたとき」に実行すれば良いわけですから、onclickイベントを使えば良いでしょう。

例えば、ボタンを作るinput要素にonclick属性を付加して、そこにボタンを無効にするJavaScriptを書きます。例えば下記のように。

<input type="button" value="1度だけ押せるボタンです！" onclick="this.disabled = true;">

そのボタンを無効にできれば良いだけなら、上記のようにonclick属性の中に直接JavaScriptを書いてしまうのが楽です。すると「this」が使えますから、そのボタンのdisabledプロパティを表すにはthis.disabledと記述するだけで済みます。とてもお手軽です。
すると、以下のサンプルのように表示・動作します。

というわけで、2回以上押されてしまうと困る場合に使うと便利です。

押せないボタンを再度押せるように戻す方法

ところで、先ほどの例では、一度無効にしてしまったボタンを、何らかの原因で再度クリックする必要が出てきた場合にちょっと困ります。
無効化をやめてクリック可能にするには、disabledプロパティの値を「false」にすれば良いだけです。そうすると、「無効状態(disabled)が無効になる」ので、ボタンは有効状態に戻ります。

その方法として、「無効を無効にするボタン」つまり「無効化したボタンを復活させるボタン」を作る方法については、私がAll Aboutで書いた記事「1回クリックすると無効になるボタンの作り方」で紹介していますので詳しくはそちらをご参照下さい。(^_^;)

(更新日：2017年06月08日)