【JavaScript】全てのチェックボックスにチェックを入れると押せるようになるボタンの実装

2023年11月11日2023年11月18日

JavaScript

全てのチェックボックスにチェックを入れたときに、押せるようになるボタンを作りたかったのですが、色々調べてもよくわからなかったので作ってみました。チェックボックスをクリックする度に、全部のチェックボックスの状態を確認して、チェックが入っていないものがあれば、ボタンを押せないようにするという流れです。下に例示を載せていますのでご参考に。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <label><input type="checkbox" class="agree">aaa</label>
  <label><input type="checkbox" class="agree">bbb</label>
  <label><input type="checkbox" class="agree">ccc</label>

  <button id="btn-submit">送信</button>

  <script src="script.js"></script>
</body>

</html>

label{
  display: block;
}

#btn-submit:disabled{
  cursor:not-allowed;
}

const submitBtn = document.getElementById('btn-submit');
submitBtn.disabled = true;

let chkBtns = document.querySelectorAll('.agree');
for (let i = 0; i < chkBtns.length; i++) {
  chkBtns[i].addEventListener('change', () => {
    let hantei = true;
    chkBtns.forEach((chkBtn) => {
      if (chkBtn.checked === false) {
        hantei = false;
      }
    });

    if (hantei === false) {
      submitBtn.disabled = true;
    } else {
      submitBtn.disabled = false;
    }
  });
}

aaa bbb ccc