disabled属性の要素をクリックイベントを発火させる方法

この記事ではdisabled属性の要素でどうしてもその要素をクリックさせた場合に何か処理を実行させたい場合の解決策を紹介します。

disabled属性は通常ではクリックイベントは発火しませんが、やや強引な方法を使うとクリックイベントを発火させることができます。

どうしてもdisabled属性の要素に何かしらの処理を加えたい際に参考になるかと思います。

この記事を読むメリット

disabled属性の要素でもクリックイベントを発生させる方法が分かる

disabled属性の要素をクリックさせる方法
1. 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ではクリックイベントが発生せず、親要素に伝播します。

結果、親要素にクリックイベントでアラートが表示されます。