【CSSだけ】checkboxでaタグの有効・無効を切り替える（未チェックで非活性に）

aタグのリンクをデフォルトでは無効（非活性状態）にして、隣接のcheckboxにチェックを入れると有効になる、というのをCSSだけで作ってみました。

「『規約に承諾した』チェックを入れないとページ遷移させない」みたいなケースを想定してます。

実際のソースコード（HTML・CSS）

See the Pen
Check-enable-anchorLink by masakitano (@masakitano)
on CodePen.

解説

CSS側で.anchorText（aタグ）に当てたpointer-eventsとは、クリックしたときの動作に関するプロパティです。こちらをnoneという値にすることで、クリック時の動作（aタグのページ遷移）を無効にします。

そして#check-enableがチェックされた時の.anchorTextに対してpointer-events: auto;とすることで、初めてaタグのリンクが有効になります（autoが初期値です）

【おすすめ取材記事】6ヶ月でWebデザイナーを目指すスクール

関東に7校舎展開するWebクリエイタースクール「デジLIG」の卒業生さん、スタッフさんを取材しました！

9万人以上のクリエイターを輩出してきた「デジタルハリウッドSTUDIO」と、デザインアワードを多数受賞しているWeb制作会社「LIG」の業務提携により誕生した、信頼と実績のあるスクールです。

未経験から6ヶ月で、プロのWebデザイナーを目指せる秘密を解説。
ぜひ、チェックしてみてください。

記事はこちらから