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

Question

前提・実現したいこと

イベントの応募フォーム↓について
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」を使っています。

Comments

[Lhankor_Mhy]

pointer-events: none; だけでフォーム部品のクリック可否を制御しているのですか？

[int32_t]

とにかく再現条件を絞ることが先決では? 再現するブラウザのバージョンとか、ラベルのタッチなのかチェックボックスへのタッチなのか、accessibility 関係の機能の有無とか。

[jay1158]

pointer-events: none; だけです。

[Lhankor_Mhy]

質問から外れますが、
https://caniuse.com/pointer
とのことなので、iPhone5s とかでは動作しないと思いますけど、それは想定済みですか？

[jay1158]

ありがとうございます。想定してなかったです..。

[jay1158]

再現条件は今後のクレーム連絡に対して
確認項目として伝えてます。
今回のはAndroid端末としか分かってません。

[Lhankor_Mhy]

当方の環境で試せるデバイスで試してみましたが、問題が再現しませんでした。
お力になれなさそうです。

[jay1158]

ありがとうございます！お手数をおかけいたしました。

Answer 1

disabledできちんと制御していないのでは？

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('.disabled').disabled=true;
  document.querySelector('#privacy_agree-1').addEventListener('change',e=>{
    document.querySelector('.disabled').disabled=!e.target.checked;
  });
});

Comments

[yambejp]

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

[jay1158]

早速ありがとうございます！
現状は制御についてはCSSの方でやってますが
教えて頂いた方法を試してみます。
フォーム自体はWordpressのプラグインです。「MW WP Form」