ラジオボタンとチェックボックスが入力されたら送信ボタンがアクティブボタンのjs

Question

前提・実現したいこと

申し込みフォームを作成しています。
ラジオボタン、チェックボックス、テキストアリアの項目で、
ラジオボタンとチェックボックスの両方が入力されたら送信ボタンがアクティブになるようにしたいです。
またチェックボックスの選択がなければ送信ボタンが非アクティブになるようにしたいです。

該当のソースコード

<form action='' method='post' id="">

    <div id="question01">
        <ul class="radio">
          <li><input type="radio" id="" name="" value=""><label for="">aaaa</label></li>
          <li><input type="radio" id="" name="" value=""><label for="">bbbb</label></li>
        </ul>
    </div>

    <div id="question02">
        <ul class="checkbox">
          <li><input type="checkbox" id="" name="" value=""><label for="">cccc</label></li>
          <li><input type="checkbox" id="" name="" value=""><label for="">dddd</label></li>
        </ul>
    </div>

    <div id="question03">
      <textarea id="" name=""></textarea>
    </div>

    <div id="">
      <ul><li><button class="" type="submit" name="" value="">送信</button></li></ul>
    </div>

</form>

試したこと

「checkValidity();」「change()」「$element.prop('checked', true);」など試しましたがラジオボタン、チェックボックスどちらかをチェックでアクティブにすることはできるのですが、両方チェックで実現することができませんでした。

Comments

[kei344]

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[kei344]

「checkValidity();」「change()」「$element.prop('checked', true);」とだけ、どこかに書いたのでしょうか。コードはなるべく全体像がわかるように提示される事をお勧めします。

[kk_0000]

大変失礼いたしました。
ラジオボタン、チェックボックス片方ではわかるのですが、両方での実現ができません。

Answer 1

こんな感じです

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  [].forEach.call(document.querySelectorAll('#f1 input'),x=>{
    x.addEventListener('change',e=>{
      var flg1=document.querySelector('#f1 [type=radio]:checked')!==null;
      var flg2=document.querySelector('#f1 [type=checkbox]:checked')!==null;
      // console.log([flg1,flg2,flg1&&flg2]);
      document.querySelector('#s1').disabled=!(flg1&&flg2);
    });
  });
});
</script>

<form method='post' id="f1">
    <div id="question01">
        <ul class="radio">
          <li><label><input type="radio" name="r1" value="">aaaa</label></li>
          <li><label><input type="radio" name="r1" value="">bbbb</label></li>
        </ul>
    </div>
    <div id="question02">
        <ul class="checkbox">
          <li><label><input type="checkbox" name="c1" value="">cccc</label></li>
          <li><label><input type="checkbox" name="c2" value="">dddd</label></li>
        </ul>
    </div>
    <div id="question03">
      <textarea iname="t1"></textarea>
    </div>
    <div id="">
      <ul><li><button type="submit" id="s1" disabled>送信</button></li></ul>
    </div>
</form>

IE対応

IEは次第に動かないものが増えていきます
とりあえず対応版だけあげておきます。

window.addEventListener('DOMContentLoaded', function(){
  [].forEach.call(document.querySelectorAll('#f1 input'),function(x){
    x.addEventListener('change',function(){
      var flg1=document.querySelector('#f1 [type=radio]:checked')!==null;
      var flg2=document.querySelector('#f1 [type=checkbox]:checked')!==null;
      document.querySelector('#s1').disabled=!(flg1&&flg2);
    });
  });
});

Comments

[kk_0000]

ありがとうございます。
希望通りの動作ができました！ただ、IEで動作しません。
「disabled」がはずれないのが原因かと思いますが、難しいでしょうか。

ちなみにボタンをホバーで切り替える画像にしたかったため、htmlを下記のように書き換えましたが、これが関係しているのでしょうか。

<li><input type="radio" name="r1" value=""><label>bbbb</label></li>

[yambejp]

IE対応版あげておきました

[kk_0000]

希望通りの動きができました、ありがとうございます！
まだまだ勉強中でしたので大変助かりました。