質問: ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/99c50ce009559f33c64709dcd1f95851.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9e42e79154d1118ce4c30c5a748ba308.png) 下記のサイトを参考にチェックボックスをカスタムしているのですが、:checkedの反応がうまくいきません。 http://takeshishomepage.com/blog/2018/05/14/css%E3%81%A7checkbox%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/ おそらく、:checkedの隣接(+)の指定がうまくできていないかと思うのですが、 何処を直せば良いのかわからず、質問をさせていただきました。 【PHP】 同意事項 [acceptance acceptance-258 class:agree-check][/acceptance] プライバシーポリシーに同意 プライバシーポリシーはこちら 【PHPから吐き出されたHTML】 同意事項 プライバシーポリシーに同意 プライバシーポリシーはこちら 【CSS】 .main .inner form .checkbox { display: inline-block; } .main .inner form .checkbox .wpcf7-form-control{ display: none; } .main .inner form .checkbox .wpcf7-form-control:checked + .check { color: #3C2207; } .main .inner form .checkbox .wpcf7-form-control:checked + .check:after { content: ""; display: block; position: absolute; top: -5px; left: -10px; width: 25px; height: 25px; background: #3C2207; border-radius: 5px; } .main .inner form .checkbox .check { padding-left: 20px; position: relative; margin-right: 20px; } .main .inner form .checkbox .check:before { content: ""; display: block; position: absolute; top: -5px; left: -10px; width: 25px; height: 25px; border: 1px solid #999; border-radius: 5px; } .main .inner form .checkbox a { font-size: 13px; color: #0081d6; margin-left: 40px; } <追記> 下記のような形で、チェックボックスを作成しました。 このチェックボックスがチェックされていないときはdisabledをボタン(id:buttonx) につけて チェックされている場合はdisabledを外すということをしたいのですが、うまくいきません。 【コンタクトフォーム 7】 同意事項 プライバシーポリシーに同意 プライバシーポリシーはこちら [response] [submit class:input id:buttonx] 【CSS】 .checkbox01-input{ display: none; } .checkbox01-parts{ padding-left: 20px; position:relative; margin-right: 20px; } .checkbox01-parts::before{ content: ""; display: block; position: absolute; top: -5px; left: -15px; width: 25px; height: 25px; border: 1px solid #C4BCB4; border-radius: 2px; } .checkbox01-parts::after{ content: ""; display: block; position: absolute; top: 0px; left: -5px; width: 7px; height: 14px; transform: rotate(40deg); border-bottom: 3px solid #C4BCB4; border-right: 3px solid #C4BCB4; border-radius:2px; } .checkbox01-input:checked + .checkbox01-parts::after{ content: ""; display: block; position: absolute; top: 0px; left: -5px; width: 7px; height: 14px; transform: rotate(40deg); border-bottom: 3px solid #fff; border-right: 3px solid #fff; border-radius:2px; } .checkbox01-input:checked + .checkbox01-parts::before{ background-color:#3C2207; } .main .inner form .checkbox .wpcf7-form-control:checked + .check:after { content: ""; display: block; position: absolute; top: -5px; left: -10px; width: 25px; height: 25px; background: #3C2207; border-radius: 5px; } .main .inner form .checkbox .check { padding-left: 20px; position: relative; margin-right: 20px; } .main .inner form .checkbox .check:before { content: ""; display: block; position: absolute; top: -5px; left: -10px; width: 25px; height: 25px; border: 1px solid #999; border-radius: 5px; } .main .inner form .c-checkbox a { font-size: 13px; color: #0081d6; margin-left: 40px; } 【JS】 $('.checkbox01-input').change(function () { // チェックが入っていたら有効化 if ($(this).is(':checked')) { // ボタンを有効化 $('#buttonx').prop("disabled", false); } else { // ボタンを無効化 $('#buttonx').prop("disabled", true); } }); この記載だとチェックが入っていてもいなくても、送信ができてしまいます、、、 どなたかご教授いただけないでしょうか。
回答: !![イメージ説明] !![イメージ説明]