チェックボックスの制限とsubmit連動　Javascript

主にJavascriptに関する質問です。

可動させたい内容として、
チェックボックスを1つでも選択すると、submit送信ボタンが、可能になる、
選択上限は3つ、といった内容です。

以下のようなプログラミング組んでみましたが、どうにも動きません。

バグ箇所の修正など、可動可能なJavascriptの解答のほど、よろしくお願いします。

<form class="pet-form">
  <div class="fields">
    
    <label for="dog">
      <input type="checkbox" id="dog" name="pet[]">
        Dog
      </label>
    <label for="cat">
      <input type="checkbox" id="cat" name="pet[]">
        Cat
      </label>
    <label for="duck">
      <input type="checkbox" id="duck" name="pet[]">
        Duck
      </label>
    <label for="moose">
      <input type="checkbox" id="moose" name="pet[]">
        Moose
      </label>
    <label for="dragon">
      <input type="checkbox" id="dragon" name="pet[]">
        Dragon
      </label>
  </div>
  <div class="message">1ヶ〜3ヶ　のチェック選ぶ</div>
  <div class="button-wrapper">
    <button class="submit" disabled>送信</button>
  </div>
</form>

、

label {
  cursor: pointer;
}

button {
  padding: 1em 2em;
}

.message {
  padding: 1em;
  background: #FFE0E0;
  margin: 1em 0;
}

、

const form = document.querySelector('form.pet-form');
const fields = form.querySelectorAll('input');
const button = form.querySelector('button.submit');
const msg = form.querySelector('.message');

form.addEventListener('change', validateForm);
form.addEventListener('submit', handleSubmit);

function validateForm() {
  let boxCount = 0;
  fields.forEach(field => field.checked ? boxCount++ : null);
  if (boxCount > 3 || boxCount <1) {
    msg.innerText = "1〜3　のチェック必要";
    msg.style.backgroundColor = '#FFE0E0'
    button.disabled = true;
  } else {
    msg.innerText = "送信できます";
    button.disabled = false;
    msg.style.backgroundColor = '#82C089'
  }
}

function handleSubmit(e) {
  e.preventDefault();
  alert('Submitted the form');
}

int32_t

2022/09/21 00:15

> どうにも動きません。それがどういう状況なのかもっと説明できませんか? チェックしても .message の表示が変わりませんか? 送信ボタンの有効無効が切り替わりませんか? ブラウザの開発者ツールのコンソールになにかエラーは出ていませんか? HTML中の <script> はどのようになってますか?

回答1件

ベストアンサー

javascript
1<script>
2const pet='[name="pet[]"]';
3document.addEventListener('change',({target})=>{
4  if(target.matches(pet)){
5    const l=document.querySelectorAll(`${pet}:checked`).length;
6    document.querySelector('[type=submit]').disabled=l==0;
7    document.querySelectorAll(`${pet}:not(:checked)`).forEach(x=>{
8      x.disabled=l>=3;
9    });
10  }
11});
12window.addEventListener('DOMContentLoaded', ()=>{
13  const e = new CustomEvent("HTMLEvents");
14  e.initEvent('change', true, true );
15  document.querySelector(pet).dispatchEvent(e);
16});
17</script>
18<form class="pet-form">
19  <ul>
20    <li><label><input type="checkbox" name="pet[]" value="dog">Dog</label></li>
21    <li><label><input type="checkbox" name="pet[]" value="cat">Cat</label></li>
22    <li><label><input type="checkbox" name="pet[]" value="duck">Duck</label></li>
23    <li><label><input type="checkbox" name="pet[]" value=",oose">Moose</label></li>
24    <li><label><input type="checkbox" name="pet[]" value="dragon">Dragon</label></li>
25  </ul>
26  <button type="submit">送信</button>
27</form>