【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が初期値です）