前提
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っぽい動きを実現することができます。
<a disabled href="https://google.com">
このリンクはクリックできないよ
</a>
a[disabled] {
pointer-events: none; /* マウスイベントの無効化 */
opacity: 0.5; /* 操作できない感のあるスタイル付け */
}
操作できない感のあるスタイル付けとしてcursor:not-allowed
とかを使うと更にそれっぽい感じになるのですが、pointer-events: none;
と食い合ってしまうので、cursorを指定したい場合は別のアプローチが必要になりそうです。
補足
単にaタグの操作を出来なくしているだけなので、disabled要素を外すなりリンク先を直接リクエストすることで遷移先を参照することはもちろん可能です。意図しない遷移・リクエストが行われた際の対策実装は別途適宜行ってください。