重複送信を防ぐため、1回しかクリックできないボタンを作りたい
掲示板の投稿ボタンやメッセージ送信ボタンなどは、誤って連続クリックされると同じ内容が何度も送信されてしまうことがあります。ボタンが1回クリックされた直後にそのボタンを無効化して、2回以上のクリックはできない仕様にすると、誤操作を防ぎやすくなるでしょう。
1回クリックすると無効化されてクリックできなくなるボタンの例
そこで本記事では、1回クリックすると無効化されて2回はクリックできないボタンを作成する方法や、ボタンの無効化状態を解除する（ボタンをクリックできる状態に戻す）機能の作り方をご紹介いたします。HTMLで作成したボタンの有効・無効状態を、JavaScriptで切り替えるだけの簡単な記述で作れますので、ぜひ試してみて下さい。
- 1回だけしかクリックできないボタンの作成方法と表示例
- ボタンの無効状態はユーザの操作で解除できる方が望ましい
- 無効状態のボタンを再度クリック可能な有効状態に戻す機能の例
- 初期状態でクリックできないボタンを作成したい場合
1回だけしかクリックできないボタンの作成方法と表示例
下記のボタンをクリックしてみて下さい。1回クリックするとボタンが無効になり、それ以上はクリックできなくなります。再度クリック可能な状態に戻すには、ページを読み込み直す(※)必要があります。※ブラウザの再読込ボタンを押すなどしてページを再読込した場合は、ボタンの無効化状態はそのまま維持されるブラウザもあります。その場合は、アドレス欄でEnterキーを押すなど、URLを再指定することでアクセスし直せば再度クリック可能な状態になります。
■1回だけしかクリックできないボタンを作るHTML＋JavaScriptソース
このような、1回クリックすると無効になるボタンはとても簡単に作れます。以下のようにHTMLとJavaScriptを記述するだけです。
<input type="button"
value="1回クリックした後、無効になります"
onclick="disabled = true;">
上記のソース全体はHTMLですが、onclick属性の値だけがJavaScriptです。ボタンを作るinput要素にonclick属性を加え、値にとても短いJavaScriptソース「disabled = true;」を記述しています。このJavaScriptがボタンを無効化しています。■ボタンをJavaScriptで無効化する仕組み
onclick属性の値に記述したJavaScriptソースは、その要素がクリックされた際に実行されます。ここではボタンを作るinput要素にonclick属性を記述しているので、ボタンがクリックされた際にJavaScriptが実行されます。
ここで記述した短いJavaScriptソース「disabled = true;」は、その要素自身のdisabledプロパティの値を「true」に変更するスクリプトです。disabledプロパティは、その要素の無効状態を指定するプロパティで、値が「true」なら無効に、「false」だと有効になります。デフォルトでは「false」です。
これによって、1回クリックされると無効になるボタンになります。
ボタンの無効状態はユーザの操作で解除できる方が望ましい
1回クリックされただけでボタンが無効状態になると、2回以上クリックされてしまう誤操作は防げますが、何らかの事情で再度クリックする必要が出てきた場合には困ります。例えば、サーバ側のエラーで正しく送信されなかったので前のページに戻って送信をやり直したい場合や、サーバ側が応答しないので再度クリックしてみたい場合などです。このような場合にボタンが無効化されたままだと、ユーザはストレスを感じてしまうかもしれません。ページを再読込すれば再度クリック可能になるとはいえ、既にその他の入力欄に記入している内容がページの再読込後にも維持されるのかどうかは分かりませんから、「再度クリックしたければページを読み込み直して」と要求するのはやや不親切です。
誤操作を防ぐ目的で無効化しているだけなら、ユーザの意思でボタンの無効状態を解除できる仕組みがあると望ましいでしょう。例えば、入力フォームの端に制限の解除用ボタンを用意しておくなどです。
一度無効化されたボタンでも、再度有効な状態に戻せるようにする例
そこで次に、ボタンの無効状態を解除できるボタンの作り方をご紹介いたします。
無効状態のボタンを再度クリック可能な有効状態に戻す機能の例
下記に掲載した「1回だけクリックできます」ボタンは、クリックすると無効状態に変化してクリックできなくなりますが、隣の「制限を解除」ボタンをクリックすると再度有効状態に戻ってクリックできるようになります。この「1回クリックすると無効になるボタン」と「無効化したボタンを再度有効化するボタン」の作り方は下記の通りです。先程と同様に、とても短いHTML＋JavaScriptソースで作れます。
<input type="button"
value="1回だけしか押せません"
id="button1" onclick="disabled = true;">
先程のHTML＋JavaScriptソースとほぼ同じですが、id属性を使ってid名を付加している点だけが異なります。他のボタン（この後に作成する「無効化を解除するボタン」）からこのボタンの状態を変化させるためには、要素を一意に特定できるid名が必要だからです。先程も解説したように、ボタンを無効化するには「その要素自身のdisabledプロパティ」の値を変更すればよいので「disabled = true;」という短いJavaScriptだけで済みます。だとすると、有効化するには「disabled = false;」と書けば良いと思われるかもしれませんが、それだけでは足りません。なぜなら、有効に戻す際は「自分自身のdisabledプロパティ」ではなく「別の要素のdisabledプロパティ」を変更することになるからです。そこで、次のように記述します。
■無効化を解除して再度クリック可能にするボタンを作るHTML＋JavaScriptソース：
<input type="button"
value="制限を解除"
onclick="getElementById('button1').disabled = false;">
上記のHTMLソースは、先程と同様にinput要素を使ってボタンを作っていて、onclick属性値にJavaScriptソースを記述しています。このJavaScriptソースが、無効化されたボタンを再度クリックできるように戻す処理です。「button1」と書いた部分には、1回しかクリックできないボタンに割り振ったid名を記述して下さい。上記のJavaScriptソースの意味は、主に以下の通りです。
- getElementById('button1')
→ id名が「button1」である要素の、 - getElementById('button1').disabled
→ 無効状態を示すdisabledプロパティに、 - getElementById('button1').disabled = false;
→ 値「false」を代入することで、無効状態を解除する。
これによって、「id="button1"」が付加されたボタンの無効状態を解除できます。同一ページ内に複数のボタンを掲載する場合は、それぞれに異なるid名を割り振って下さい。
初期状態でクリックできないボタンを作成したい場合
参考までに、最初から無効状態になっているボタンの表示例と作成方法もご紹介しておきます。上記の左側にある「1回だけしかクリックできません」ボタンは、初期状態では無効化されていてクリックできません。右側の「クリックできるようにする」ボタンをクリックすると、無効状態が解除されてクリックできるようになります。
■1回クリックすると無効になるボタン（初期状態で無効）を作るHTML＋JavaScriptソース：
<input type="button"
value="1回だけしかクリックできません"
id="button2" disabled onclick="disabled = true;">
上記のようにdisabled属性を書いておくと、初期状態で無効化されたボタンとして表示されます。XHTMLでは「disabled="disabled"」という省略しない書き方が必要でしたが、HTMLではただ「disabled」と書くだけで済みます。■無効化ボタンをクリックできるように有効化するボタンを作るHTML＋JavaScriptソース：
<input type="button"
value="クリックできるようにする"
onclick="getElementById('button2').disabled = false;">
このソースは先程の例と同じです。id属性の値だけは、対象のボタンに合わせて書き換えて下さい。重複送信を防ぐため、1回しかクリックできないボタンを作りたい
今回は、同じボタンを何度も押してしまう誤操作を防ぐための、1回クリックすると無効になるボタンの作り方をご紹介いたしました。とても短いJavaScriptソースだけで実現できることがお分かり頂けたでしょう。とても簡単ですから、ぜひ試してみて下さい。【関連記事】
