要素のクリックを無効にする3つの方法。

今回はクリック無効機能について。

「あるボタンをクリックして何らかの処理が走る時、その処理が終わるまでそのボタンをクリックできないようにしたい。」といったケースはよくあると思います。
例えば、
「スライドショーが動いている間は、スライドボタンをクリックできないようにして余計な処理負担にならないようにしたい」
「二重でデータ送信しないよう、フォーム送信が完了するまではボタンを押せないようにしたい」
など。

こちらに関しては色んな実装方法があると思いますが、今回は3つにまとめました。
簡単な例を使いながらご紹介します。

1、HTMLを使う場合

1つ目は、直接HTML要素にdisabled属性を付与する方法です。

サンプルコード

index.html

<button type="button" disabled>ボタン</button>

メリット

• 記述が最も簡単。
• JavaScriptや追加のライブラリが無くても機能する。

デメリット

• 動的な状態管理ができない。

2、CSSを使う場合

2つ目は、CSSで実装する方法です。
pointer-eventsプロパティを使用します。クリック無効というより、厳密にはクリックイベントの受付を無効化する、というものです。

サンプルコード

index.css

.disabled {
	pointer-events: none;
}

こちらは、JQueryやJavaScriptの条件分岐と併用して、条件に応じたスタイルを付与も可能です。

index.js

if (!sample.is(':animated')) {
  sample_btn.addClass('disabled');
}

メリット

• JQueryやJavaScriptと併用することで、動的な状態管理ができる。
• CSSのみでクリックイベントを無効にできるため、JavaScriptを使わない簡単なケースにも適しています。

デメリット

• ボタンが実際には無効ではなく、クリックイベントが無視されるだけなので、ユーザーから見て視覚的にわかりにくい場合がある。

3、JQueryを使う場合

3つ目は、JQueryで実装する方法です。prop()メソッドを使います。
フォームのバリデーション、非同期通信（Ajax呼び出し）など、動的な処理が完了するまでボタンを無効化したい場合などにとても有用です。

サンプルコード

index.js

//何らかの処理
if (!$sample.is(':animated')) {
  $sample_btn.prop('disabled', true)
}
//何らかの処理

prop()は、属性値の取得・設定ができるメソッドです。ここでの属性値とは'disabled'になります。この取得した属性値をどう処理するのか、それを第二引数で指定します。今回はtrueまたはfalseを記述することで処理方法を決めます。場合によっては、以下のようなfunctionを使った処理を行うこともあるでしょう。

index.js

要素.prop('disabled', function(){
//何らかの処理
})

メリット

1. 複雑な条件でも動的な状態管理ができる。
2. prop()メソッドを使用することで、DOM要素のプロパティを直接変更できるため、実装が簡単かつ効果的。

デメリット

1. JQueryに依存しているため、小さなプロジェクトやJQueryを使用していないプロジェクトでは余計な負担になる可能性がある。
2. ユーザーがJavaScriptを無効にしている場合、機能しない。

まとめ

いかがだったでしょうか。
基本的な機能の実装方法になりましたが、実務においてはJQueryやJavaScriptを使って条件分岐の中で任意のタイミングで実装することが多いかと思います。参考になれば幸いです！