<a>タグのリンクを無効（disabled）にする
リストの表示で<a>タグを利用していると現在表示中のページのリンクだけ無効にしたいといったことが時々あります。
これまでは<a>タグにdisabledといった属性はないので、<span>タグに切り替えてHTMLを出力していましたが、CSSを使ってもっと簡単にできることを知ったので、そのメモになります。
目次
- コード
- コード（IE、Edgeの場合）
- hrefの属性自体を出力しない
- コード（JavaScriptの場合）
- コード（jQueryの場合）
- 実際の表示確認
- まとめ
- 参考リンク
コード
コードは至って簡単で以下のようなCSSクラスを定義します。
a.disabled{
pointer-events: none;
}
あとは無効にしたいリンクに設定するだけです。
<a href="/" class="disabled" tabindex="-1">CSSクラスに「disabled」を設定したリンク</a>
bootstrapでも上記のような実装になっています。
CSSの「pointer-events: none;」の設定だけではタブの移動でフォーカスが当たってしまうので、「tabindex="-1"」を設定しています。
これだけでできるなんて素晴らしい、わざわざ<span>に切り替えなくてもいいんだ！？ と思ったのも一瞬で、Chrome、Firefox、Safariは大丈夫でしたが、問題児のIEと最近になってそろそろ使えるブラウザになってきた感があったEdgeもダメでした。
コード（IE、Edgeの場合）
IEの場合ですが、属性にdisabledが使えました。
<a href="/" disabled="disabled" tabindex="-1">属性に「disabled」を設定したリンク</a>
上記の場合、クリックしてもリンク先に飛ばないだけで見栄えは<a>タグそのままなので、CSSクラスと併用するとよさげです。
Edgeの場合ですが、属性やCSSで無効にすることはできなかったので、すべてのブラウザに対応させるには<span>タグへの置き換えやhrefの属性を削除（出力しない）、またはJavaScriptを使うしかなさそうです。
hrefの属性自体を出力しない
属性にdisabledを設定するくらいなら、href属性を出力しないこちらの方がIE以外のブラウザも飛ばなくなるのでよさげです。
<a tabindex="-1">hrefの属性がないリンク</a>
属性の値を空にしただけでは、サイトのトップページに飛んでしまいます。
コード（JavaScriptの場合）
JavaScriptで行う場合、hrefの値に「javascript:void(0)」を設定します。
<a href="javascript:void(0)" tabindex="-1">hrefにJavaScriptを設定したリンク</a>
コード（jQueryの場合）
jQueryで行う場合は以下の通りです。
<a href="/" class="jquery-disabled" tabindex="-1">jQueryを使って無効にしたリンク</a>
$('a.jquery-disabled').click(function() {
return false;
});
実際の表示確認
<a href="/">通常のリンク</a>
CSSクラスに「disabled」を設定したリンク（Chrome、Firefox、Safari用）
<a href="/" class="disabled" tabindex="-1">CSSクラスに「disabled」を設定したリンク</a>
<style type="text/css">
a.disabled{
pointer-events: none;
}
</style>
<a href="/" disabled="disabled" tabindex="-1">属性に「disabled」を設定したリンク</a>
<a tabindex="-1">hrefの属性がないリンク</a>
<a href="javascript:void(0)" tabindex="-1">hrefにJavaScriptを設定したリンク</a>
<a href="/" class="jquery-disabled" tabindex="-1">jQueryを使って無効にしたリンク</a>
<script>
$('a.jquery-disabled').click(function() {
return false;
});
</script>
まとめ
IEやEdge非対応でよければCSSで「pointer-events: none;」を設定。
すべてのブラウザに対応させるなら、JavaScriptやjQueryで対応。
JavaScriptが使えないまたは使いたくないといった場合、<span>タグに置き換え（または表示の切替）。
...といった感じでしょうか。