2007年5月23日(水) 11時52分13秒 [入力フォーム]

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

BBSやメールフォームなどの「投稿（送信）」ボタンは、何度も連打されると困ることがあります。同じ内容が連続送信されてしまうと、後から消す作業が面倒ですし。
というわけで、「投稿（送信）」ボタンを1度しかクリックできなくする方法がよく使われています。

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

document.(フォーム名).(ボタン名).disabled = true;

上記のようなJavaScriptで、ボタンのdisabledプロパティの値を「true」にすると、そのボタンは使えなくなります。この処理を、「ボタンがクリックされたとき」に実行すれば、「1度しかクリックできないボタン」が作れます。

例えば、以下のようなHTMLを書きます。

<input type="button" value="1度だけクリックできます" onclick="this.disabled = true;">

そのボタンだけを無効にできれば良いなら、上記のようにonclick属性の中に直接JavaScriptを書いてしまうのが楽です。documentオブジェクトから記述する必要もなく、いきなり「this.disabled」だけで済みます。

これを表示すると、以下のように見えます。（※クリックするとアラートボックスを表示するようにしてあります。特に何も送信はしません。）

クリックするとボタンが無効になるので、ページを再読込するまで再度クリックはできません。

無効にしたボタンを再度クリック可能にする機能を加える

さて、先ほどの例では、一度無効にしてしまったボタンを、何らかの原因で再度クリックする必要が出てきた場合にはちょっと困ります。そこで、「無効を無効にするボタン」つまり、「無効化したボタンを復活させるボタン」を作ってみます。

無効化をやめてクリック可能にするには、disabledプロパティの値を「false」にすれば良いだけです。
以下のように記述します。

<form id="sakura" name="sakura">
   <input type="button" value="1度だけクリックできます" id="clickonce" name="clickonce" onclick="this.disabled = true;">
   <input type="button" value="制限を解除" onclick="document.sakura.clickonce.disabled = false;">
</form>


「自分自身を無効化する」場合には、「this.disabled」という記述で良かったのですが、他のボタンの有効・無効を操作するには、documentオブジェクトから名前を記述する必要があります。ですから上記では、「document.sakura.clickonce.disabled」のように記述しています。
特定のフォーム・特定のボタンを指し示せるようにする必要があるため、name属性を使って名前を加えています。（フォームには「sakura」、ボタンには「clickonce」という名前を加えています。これらの名前は何でも構いません。）

これを表示させると、以下のように見えます。

「1度だけクリックできます」ボタンをクリックすると、そのボタンは無効になります。
しかし、隣の「制限を解除」ボタンをクリックすることで、無効化が解除され、再度クリック可能になります。