Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど