aタグでもdisabled属性を扱えるように見せかける

前提

disabled属性とは要素の操作・入力を無効化するために設定する要素ですが、この要素を適用することができるのはformに関連付けられた要素のみです。
参考: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute

しかし、しばしば本来disabled属性が使用できないaタグやその他のタグでも操作の無効化の意味合いとしてdisabled属性を使いたくなることがあります。ありません？僕はあるんです、結構頻繁に。

そんなときにちょっと使えそうなTIPSを書いておきます。

属性セレクタを使用してdisabledっぽくする

css3には属性セレクタというものがあります。これは指定した属性の存在もしくはその値によって要素を選択できるセレクタです。

これを用いて、disabled属性を持つaタグ要素を選択し、pointer-eventsを用いてマウスイベントを無効化してやることで擬似的なdisabledっぽい動きを実現することができます。

動作サンプル（codepen）

  <a disabled href="https://google.com">
    このリンクはクリックできないよ
  </a>

  a[disabled] {
    pointer-events: none; /* マウスイベントの無効化 */
    opacity: 0.5; /* 操作できない感のあるスタイル付け */
  }

操作できない感のあるスタイル付けとしてcursor:not-allowedとかを使うと更にそれっぽい感じになるのですが、pointer-events: none;と食い合ってしまうので、cursorを指定したい場合は別のアプローチが必要になりそうです。

補足

単にaタグの操作を出来なくしているだけなので、disabled要素を外すなりリンク先を直接リクエストすることで遷移先を参照することはもちろん可能です。意図しない遷移・リクエストが行われた際の対策実装は別途適宜行ってください。