2つチェックボックスをつけたらボタンを押せるようにしたい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
javascriptで2つチェックボックスをつけたらボタンが押せるようになるというのを実現したいのですが
なかなかうまくいきません。。。javascriptは全くの初心者で見様見真似で書いたものになります。
通常はグレーでボタンが押せなくなっているのですがチェック2つをつけたらボタンがに色がついてリンクも押せるようになることが実現したいです。

どうしてもチェックを2回押すと再びボタンが表示されてしまいます。
何卒ご教示お願い致します。

該当のソースコード

<label><input type="checkbox" class="checkmark" name="hage[]" value="300"> チェック01</label> 　<label><input type="checkbox" class="checkmark" name="hage[]" value="301"> チェック02</label> <button type="submit" class="bt-wrap">
    <a href="" class="ticket-scrap" target="_blank">ボタン押せます</a>
</button>  

.checkmark {
  font-size: 1.2em;
  font-weight: 600;
  padding-left: 1.5em;
  position: relative;
  height: 1.5em;
  margin: 1em auto;
  cursor: pointer;
}
.checkmark:before {
  content: "";
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid #041E82;
}
.checkmark:after {
  content: none;
}
input[type=checkbox].checkmark.checked:after {
  content: "";
  display: block;
  position: absolute;
  width: 0.4em;
  height: 0.9em;
  top: 0;
  bottom: 14px;
  left: 5px;
  margin: auto;
  transform: rotate(45deg);
  border-bottom: 8px solid #041E82;
  border-right: 8px solid #041E82;
}
.bt-wrap.active {
  pointer-events: all;
  filter: grayscale(0);
  opacity: 1;
}
.checkmark.checked:after {
  content: "";
  display: block;
  position: absolute;
  width: 0.4em;
  height: 0.9em;
  top: 0;
  bottom: 14px;
  left: 5px;
  margin: auto;
  transform: rotate(45deg);
  border-bottom: 8px solid #041E82;
  border-right: 8px solid #041E82;
}
.bt-wrap.detail-view a {
  background-color: #36B5FA;
}

        

    $(function () {        
        $(".bt-wrap").toggleClass('').prop("disabled", false);         
          $("input[type='checkbox']").on('change', function () {
            $(this).toggleClass('checked');               
              if ($(".checkmark:checked").length > 1) {                
                $('.bt-wrap').toggleClass('active').prop("disabled", false);
              } else {                
                $('.bt-wrap').toggleClass('').prop("disabled", true);
              }
          });
      });
        

Comments

[m.ts10806]

細かいですが「チェックボタン」ではなく「チェックボックス」ですね。

[nonnon1104]

失礼いたしました！確かにそうでしたね。。。ご指摘ありがとうございます！

[m.ts10806]

あと、buttonタグ内にチェックボックスがあるというのはどういう意図でしょうか。構造的に謎です。

[m.ts10806]

質問は編集できます

[nonnon1104]

先ほど修正しました。間違えて<button>タグが入っておりましたので削除しておきました。

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('[type=checkbox]').forEach(x=>{
    x.addEventListener('change',()=>{
      document.querySelector('[type=submit]').disabled=document.querySelectorAll('[type=checkbox]:checked').length!=2;
    });
  });
});
</script>
<form>
<label><input type="checkbox" class="checkmark" name="hage[]" value="300"> チェック01</label> 　<label><input type="checkbox" class="checkmark" name="hage[]" value="301"> チェック02</label>
<button type="submit" class="bt-wrap" disabled>ボタン押せます</button>
</form>

Comments

[nonnon1104]

ご回答いただきありがとうございます！試してみます！

[nonnon1104]

すみません実装してみたのですが
.bt-wrap.activeの内容が反映されず。。。.toggleClass('active')をつけてみたのですがやはりチェックを外したりつけたりするたびにグレーになったり色がついたりの繰り返しになってしまいます。せっかくご回答いただいたのに申し訳ございません。。。