チェックボックスにチェックしても送信ボタンがグレーのまま押せない
受付中
回答 1
投稿
- 評価 0
- クリップ 0
- VIEW 28
前提・実現したいこと
イベントの応募フォーム↓について
https://solato-meatfes2021.net/entry
必要事項と、画像を入れ、「プライバシーポリシー確認」欄へ☑を入れても
「内容を確認する」ボタンがグレーのままで次に進めない。
というクレームがありました。
(au、楽天モバイルの方で、アンドロイドをご使用)
それを受け付けたスタッフが確認してやはり
「押せなかった」と言われます。
こちらでは現象を確認出来ず、
該当部分は複雑なJSではないので原因も分からずで
困っているのですが、おわかりになる方がいらっしゃいますか。
発生している問題・エラーメッセージ
チェックボックスにチェックしても「内容を確認する」ボタンがグレーのまま押せない
該当のソースコード
==========================
■HTML
==========================
<!-- チェックボックス -->
<div class="privacy_box">
<span class="mwform-checkbox-field horizontal-item">
<label for="privacy_agree-1">
<input type="checkbox" name="privacy_agree[data][]" value="プライバシーポリシーを確認しました" id="privacy_agree-1">
<span class="mwform-checkbox-field-text">プライバシーポリシーを確認しました</span>
</label>
</span>
<input type="hidden" name="privacy_agree[separator]" value=",">
<input type="hidden" name="__children[privacy_agree][]" value="{"\u30d7\u30e9\u30a4\u30d0\u30b7\u30fc\u30dd\u30ea\u30b7\u30fc\u3092\u78ba\u8a8d\u3057\u307e\u3057\u305f":"\u30d7\u30e9\u30a4\u30d0\u30b7\u30fc\u30dd\u30ea\u30b7\u30fc\u3092\u78ba\u8a8d\u3057\u307e\u3057\u305f"}">
</div>
<!-- submitボタン -->
<div class="btn_confirm inactive">
<input type="submit" name="submitConfirm" value="内容を確認する" class="btn disabled">
</div>
==========================
■JS
==========================
$("#privacy_agree-1").prop('checked',false);
$("#privacy_agree-1").on("click",function() {
if ($(this).prop('checked') == false) {
$(".btn_confirm ").addClass('inactive');
//alert("解除");
} else {
$(".btn_confirm ").removeClass('inactive');
//alert("選択");
}
});
==========================
■CSS
==========================
#contents .btn_confirm input[type="submit"] {
width: 330px;
height: 75px;
background: url("/common/img/contents/bg_btn_sp.png") no-repeat center;
background-size: contain;
font-size: 23px;
line-height: 75px;
}
#contents .btn_confirm.inactive input[type="submit"] {
background: url("/common/img/contents/bg_btn_gray_sp.png") no-repeat center;
background-size: contain;
color: #dbdbdb;
pointer-events: none;
}
#contents .btn_confirm.inactive::after {
border-color: transparent transparent transparent #dbdbdb;
}
試したこと
複数のスマホ実機で確認(念のためPC、タブレットも)
補足情報(FW/ツールのバージョンなど)
ちなみにフォーム自体は
WPのプラグイン「MW WP Form」を使っています。
-
クリップを取り消します
-
質問の評価を上げたことを取り消します
-
質問の評価を下げたことを取り消します
0
disabledできちんと制御していないのでは?
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('.disabled').disabled=true;
document.querySelector('#privacy_agree-1').addEventListener('change',e=>{
document.querySelector('.disabled').disabled=!e.target.checked;
});
});
投稿
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 87.82%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
yambejp
2021/07/19 17:18