Help us understand the problem. What is going on with this article?

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要素を外すなりリンク先を直接リクエストすることで遷移先を参照することはもちろん可能です。意図しない遷移・リクエストが行われた際の対策実装は別途適宜行ってください。

ampersand
クソアプリの投稿ばっかりしてるのでContributeの数に惑わされないようにしてください。僕の技術力はしょっぱいです。
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした