質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.82%

チェックボックスにチェックしても送信ボタンがグレーのまま押せない

受付中

回答 1

投稿

  • 評価 0
  • クリップ 0
  • VIEW 28

score 0

前提・実現したいこと

イベントの応募フォーム↓について
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="{&quot;\u30d7\u30e9\u30a4\u30d0\u30b7\u30fc\u30dd\u30ea\u30b7\u30fc\u3092\u78ba\u8a8d\u3057\u307e\u3057\u305f&quot;:&quot;\u30d7\u30e9\u30a4\u30d0\u30b7\u30fc\u30dd\u30ea\u30b7\u30fc\u3092\u78ba\u8a8d\u3057\u307e\u3057\u305f&quot;}">
</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」を使っています。

  • クリップを取り消します

  • 質問の評価を上げたことを取り消します

  • 質問の評価を下げたことを取り消します

回答 1

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;
  });
});

投稿

yambejp

ユーザーランキング総合2位

score 83461

  • yambejp

    yambejp

    2021/07/19 17:18

    formも見当たらないし送信するベースができていないようにも見えます

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る