ホームページ作成

【ホームページ作成】1回クリックすると無効になるボタンを作る

フォームの活用・装飾 (HTML,CSS,JavaScript)

更新日：2008年04月22日

1回クリックすると無効になるボタンを作る

西村文宏

BBSの投稿ボタンやメッセージの送信ボタンなどは、複数回クリックされると同じ内容を何度も送信してしまいます。1回クリックすると無効状態に変化する送信ボタンを用意して、重複送信を防ぐ方法をご紹介。

無効状態を解除できるようにする

ボタンの無効状態を解除できる仕組みは、以下のようにHTMLとJavaScriptを記述することで作れます。

<form name="orange">

   <input type="button" value="1回だけクリックできます" name="apple" onclick="disabled = true;">

   <input type="button" value="制限を解除" onclick="document.orange.apple.disabled = false;">

</form>

上記のソースは、先ほどのボタンに加えて、制限解除用のボタンを作っています。また、フォームとボタン（form要素とinput要素）にname属性を使って名称を付加しています。

前ページでご紹介したように、ボタンを無効化するときは「自分自身のdisabledプロパティ」の値を変更すればよいので「 disabled = (値); 」という短い記述で済みました。しかし、有効に戻すときは「自分自身のdisabledプロパティ」ではなく「隣のボタンのdisabledプロパティ」の値を変更しなければならないため、「 disabled 」という記述だけでは変更できません。
ここでは、次のように記述します。

document.(フォーム名).(オブジェクト名).disabled = false;

上記のソースでは、フォーム名はform要素のname属性の値ですから「orange」です。オブジェクト名（＝ここではボタン名）はinput要素のname属性の値ですから「apple」です。
したがって、以下のようになります。

document.orange.apple.disabled = false;

このプロパティの値として「false」を指定することで、無効状態を解除することができます。
上記のソースを表示させると、以下のように見えます。

「1回だけクリックできます」ボタンをクリックするとすぐに無効になり、重複してクリックはできなくなります。しかし、隣の「制限を解除」ボタンをクリックすると、無効状態が解除され、再度クリックできるようになります。

おわりに

今回は、誤って同じ内容を重複して送信してしまうのを防ぐための、「1回クリックすると無効になる」ボタンの作り方をご紹介いたしました。簡単な記述を加えるだけで実現できますから、ぜひ試してみて下さい。

【関連記事】

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！