2020-01-07 更新

<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>

属性に「disabled」を設定したリンク(IE用)


<a href="/" disabled="disabled" tabindex="-1">属性に「disabled」を設定したリンク</a>

hrefの属性がないリンク


<a tabindex="-1">hrefの属性がないリンク</a>

hrefにJavaScriptを設定したリンク


<a href="javascript:void(0)" tabindex="-1">hrefにJavaScriptを設定したリンク</a>

jQueryを使って無効にしたリンク


<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>タグに置き換え(または表示の切替)。

...といった感じでしょうか。

参考リンク

CSS】関連記事