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