【CSSのみ】checkboxと送信ボタン(aタグ)の有効・無効を連動する

お問い合わせフォームや、LPなどで個人情報を取得する際に、チェックボックスにチェックを入れないと次のページに進めない（ボタンが押せない）仕様をCSSだけで実現します。

「利用規約」や「個人情報の取り扱い」に同意した方のみ先に進んでくださいという場合に、確実に同意したと相手の意思を確認する際によく目にしますよね。

弊社では、プライバシーマークを取得しているお客様が審査の際に対応が必要になってくるのでjavascriptでよく実装していたのですが、LPは1ページに10個以上ボタンがあることも珍しくなく、その場合キャッシュの問題でたまに思わぬ挙動を起こしたなんてこともありましたので、CSSのみでの実装も行っています。

デモページを用意していますので、まずはこちらのページで試してみてください。

こちら ⇒ デモページ

CSSのみで実装する場合は「pointer-eventsプロパティ」を利用する

一般的にjQueryやjavascriptではdisabled属性を外したり、付与することで有効・無効の切り替えを実現していることが多いと思いますが、CSSだけで動作させる場合はクリックイベントをキャンセルするpointer-eventsプロパティを利用します。

pointer-eventsは、要素に対するクリックなどのマウスイベントの動作に関するプロパティです。

初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。

チェックボックスにチェックが入っていないときはpointer-events: none;（クリックをキャンセル）、チェックが入ったらpointer-events: auto;（初期値に戻す）にすることで有効、無効の切り替えを行います。

HTML＆CSS

<div class="kozin-check">
<input type="checkbox" id="consent1" autocomplete="off">
<label for="consent1">以下の個人情報の取り扱いについて同意の上で送信します。</label>
<a href="リンク先URL" id="interlock" class="btn" target="_blank" rel="noopener">ボタンクリック</a>
</div>

/* チェックボックス*/
input#consent1{
  text-align: left;
  margin: 0;
}
input#consent1 + label{
  text-align: left;
  width: 600px;
}
#interlock{
  pointer-events: none;　/*クリックをキャンセル*/
}
#consent1:checked ~  #interlock {
  pointer-events: auto;　/*キャンセルを解除*/
}
@media screen and (max-width:767px)  { 
input#consent1 + label{
width: 100%;
}
}/* SP END */

まずは“aタグ”に pointer-events: none;　というスタイルを当て、クリック時の動作を無効にします。

あとはチェックボックスにチェックが入ったら、#interlockをpointer-events: auto;とし、初期値に戻すことで有効にするだけです。

“id”のinterlockは“class”でもかまいません。

13行目の“~”（チルダ）は、関節セレクタです。

関節セレクタは同一階層（親要素が同じ兄弟関係）かつ、その基準となる要素（兄）より後ろ（下）にある要素（弟）に適応されるセレクタです。

同一階層かつ基準の要素より後ろにあれば、間に他の要素が入っても適応されるので、直下セレクタや隣接セレクタよりも柔軟に使えます。

注意事項

ブロックをまたぐと動作しない

checkboxとaタグは同一階層になければいけないので、同じブロック内で使わないと動作しません。

例えばこれだと動作しません。

aタグがcheckboxがより上だと動作しない

これも動作しません。

間接セレクタ「~」を使って兄弟要素として指定しているので、aタグが基準要素のcheckboxより上だと兄になってしまい動作しません。