《 3:00 PM 公開/更新》
1度しか押せないボタンを作る簡単な方法 [入力フォーム]
JavaScriptを使って「1度しかクリックできないボタン」を作るには、ボタンのdisabledプロパティに値trueを指定するだけです。id名を割り振ったりgetElementByIdメソッドで対象を特定したりする必要はありません。単にonclickイベント内で「this.disabled = true;」みたいに書けば良いだけで超簡単です。
1度しか押せないボタンを作る
BBSやメールフォームなどの「投稿(送信)」ボタンは、何度も連打されると困ることがあります。BBSに同じ内容が連続送信されてしまうと後から消す作業が面倒ですし、同じ内容のメッセージが何通もメールで届くと件数の把握が面倒になってしまいますし。
そんなときには、投稿(送信)ボタンを1度しかクリックできなくする方法がよく使われています。
例えば以下のようなボタンです。見た目は普通のボタンですし、普通の操作でクリック可能ですが、一度クリックすると無効化され、二度は押せなくなります。
つまり、1度しか押せないわけです。
1度しか押せないボタンを作る方法(背景の説明)
input要素で作るボタンには、disabled属性が使えます。例えば、HTMLで以下のように記述すると「最初から無効状態のボタン」が表示されます。
<input type="button" value="最初から無効(disabled)状態なボタン" disabled>
このdisabled属性をJavaScriptから設定してやれば、動的にボタンを無効化できます。
見た目は以下のような感じです。
この処理を、「ボタンがクリックされたとき」に実行すれば良いわけですから、onclickイベントを使えば良いでしょう。
例えば、ボタンを作るinput要素にonclick属性を付加して、そこにボタンを無効にするJavaScriptを書きます。例えば下記のように。
<input type="button" value="1度だけ押せるボタンです！" onclick="this.disabled = true;">
そのボタンを無効にできれば良いだけなら、上記のようにonclick属性の中に直接JavaScriptを書いてしまうのが楽です。すると「this」が使えますから、そのボタンのdisabledプロパティを表すにはthis.disabledと記述するだけで済みます。とてもお手軽です。
すると、以下のサンプルのように表示・動作します。
無効化をやめてクリック可能にするには、disabledプロパティの値を「false」にすれば良いだけです。そうすると、「無効状態(disabled)が無効になる」ので、ボタンは有効状態に戻ります。
その方法として、「無効を無効にするボタン」つまり「無効化したボタンを復活させるボタン」を作る方法については、私がAll Aboutで書いた記事「1回クリックすると無効になるボタンの作り方」で紹介していますので詳しくはそちらをご参照下さい。(^_^;)
()
JavaScript TIPSふぁくとりーの主要なカテゴリ
著者紹介
関連するかもしれない情報など
▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)