にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

1度しか押せないボタンを作る簡単な方法 [入力フォーム]

JavaScriptを使って「1度しかクリックできないボタン」を作るには、ボタンのdisabledプロパティに値trueを指定するだけです。id名を割り振ったりgetElementByIdメソッドで対象を特定したりする必要はありません。単にonclickイベント内で「this.disabled = true;」みたいに書けば良いだけで超簡単です。

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回クリックすると無効になるボタンの作り方」で紹介していますので詳しくはそちらをご参照下さい。(^_^;)

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---