JavaScriptを使わずチェックボックスを用いたボタンのクリック有効化、非有効化がしたい。

Question

前提・実現したいこと

チェックボックスにチェックが入ると、ボタンが有効化される仕様にしたい。

前提：CMSを利用しているのですが、こちらにはJavaScriptを利用することはできず、CSSのみでチェックボックスを利用し
ボタンの有効化、非有効化を変更する必要があります。

発生している問題・エラーメッセージ

チェックボックスを有効化しても反応しない

該当のソースコード

<p>
<input type="checkbox" class="toggle"/>
同意する
</p>
        <!--form_btn checkinput_btn 以下はソースは変更できない-->
	<div class="form_btn checkinput_btn">
		<span class="global_btn">
			<button type="submit" class="btn_color_emp">
				<span class="button_head_space"></span>
                <!--ここの確認ボタンをクリックの有効化、非有効化を設定する-->
				<span class="button_text">確認画面へ</span>
				<span class="button_end_space"></span>
			</button>
		</span>
	</div>

.btn_color_emp{
	pointer-events: none;
}


input:checked ~ .btn_color_emp{
  pointer-events: auto;
}

試したこと

checkboxを追加し、チェックがOFFのときはpointer-events:none;で 確認画面へ をクリックできないようにしていき、
こちらにチェックが入った場合に、通常通りクリックできるように input:checkedでpointer-eventsを有効にしました。

Answer 1

もっと分かりやすい指定をすると良いかと思います。
例えば背景色

.btn_color_emp{
    pointer-events: none;
    background-color:#000;
}


input:checked ~ .btn_color_emp{
    pointer-events: auto;
    background-color:#ccc;
}	

これで、チェックを入れたときに変化が起きているかどうか確認できます。
つまり、この指定では効いてないということになります。

あとは、「ではチェックボックス自体に効くのか？」というのも確かめてみます。

input:checked{
	width:200px;
	height:200px;
}

となると指定の仕方であることが分かると思います。
今回関係するのは「~」ですね。

こういうときにドキュメントを確認します。

MDN:CSS: カスケーディングスタイルシート > 一般兄弟結合子

右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。
右側のセレクタで選択される要素が、左側のセレクタで選択される要素より後に表れることです。（直後である必要はありません）
もうひとつが、これらの要素が同じ親要素（要素）をもつことです。

今のHTML構造だとinputの親はpでbuttonの親はspanです。

家系図で言うと、inputの親の兄弟の孫がbuttonなので、連結しようがない、ということになります。
HTMLの構造変えるか、JavaScriptをなんとか使うしかないのではないでしょうか。

Comments

[mouse_phone]

セレクタの使い方が難しいと感じる部分が多いので、セレクタについて勉強してみようかと思います。
ありがとうございました。

[m.ts10806]

問題切り分けをしっかりやっていけば良いかと思います。

Answer 2

構造に対する参照方法が正しくありません

Comments

[yambejp]

<style>
.btn_color_emp{
pointer-events: none;
}
input:checked ~ * .btn_color_emp{
pointer-events: initial;
}
</style>
<input type="checkbox" class="toggle" id="agree">
<label for="agree">同意する</label>
<div class="form_btn checkinput_btn">
<span class="global_btn">
<button type="submit" class="btn_color_emp">
<span class="button_head_space"></span>
<span class="button_text">確認画面へ</span>
<span class="button_end_space"></span>
</button>
</span>
</div>

[yambejp]

チェックボックスに対してpをかぶせてしまうと、兄弟要素ではなくなってしまうので
あくまでも兄弟になるようにきちんと構造を設定すること

[mouse_phone]

無事動作させることができました。ありがとうございます。

要素の位置づけの部分を意識して記載してみます。