この記事では、disabled属性の要素をクリックした際に処理を実行させたい場合の解決策を紹介します。
disabled属性は通常クリックイベントが発火しませんが、工夫することで発火させることが可能です。
disabled属性の要素に処理を追加したい場合の参考になる内容です。
この記事を読むメリット
- disabled属性の要素でもクリックイベントを発生させる方法が分かる
disabled属性の要素をクリックさせる方法
まずは、disabled属性の要素をクリックした際に処理を実行する方法を紹介します。
disabled属性が付いている要素は、「変更不可・フォーカス不可・フォーム送信不可」となります。
つまり、ユーザー操作は一切できません。
ブラウザのデフォルトでは、disabled要素には操作できないことを示すスタイルが適用されます。
button要素の場合、クリックもできずフォーム送信も行えません。
input要素では入力もできなくなります。
ここでは少し工夫してクリックイベントを発生させる方法を紹介します。
disabled要素の親要素にクリックイベントを設定する
disabled要素自体にはクリックイベントを設定できないため、親要素を作成してそこにクリックイベントを設定します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>disabled属性button要素</p>
<button disabled="disabled">クリック</button>
<p>disabled属性なしbutton要素</p>
<button>クリック</button>
<p>disabled属性input要素</p>
<input type="text" disabled />
<p>disabled属性なしinput要素</p>
<input type="text" />
<p>disabled属性button要素を無理やりクリックできるように</p>
<div class="disabled-btn-wrap">
<button style="pointer-events: none" disabled="disabled">クリック</button>
</div>
</body>
<script>
const disabledBtn = document.querySelector('.disabled-btn-wrap');
disabledBtn.addEventListener('click', function () {
alert('クリックできた！');
});
</script>
</html>
まず、button要素に「disabled-btn-wrap」クラスの親要素を設定します。
さらに、button要素には「style=”pointer-events: none”」を指定し、クリックイベントが発生しないようにします。
するとbuttonではクリックイベントが発生せず、親要素へイベントが伝播します。
結果として、親要素のクリックイベントでアラートが表示されます。
「フォーム送信はさせたくないが、クリック時にアラートを表示したい」といったケースで活用できます。
disabled属性以外の方法も要検討
いかがだったでしょうか。
今回はdisabled属性の要素でクリックイベントを発生させる方法を紹介しました。
HTMLでユーザー操作を制限する場合、disabledの使用が一般的ですが、「クリックイベントを発火させたい」「見た目だけ無効にしたい」といったケースでは「aria-disabled」や「readOnly」などの代替手段も検討しましょう。
「aria-disabled」や「readOnly」については、別記事で詳しく解説予定です。
disabled属性を維持しつつクリックイベントを発生させたい場合は、ぜひ参考にしてみてください。
コメント