【JavaScript】チェックボックスの状態でボタンを活性化・非活性化する方法｜単一・複数・条件組み合わせ・disabled属性の使い方まで解説

<form id="agreeForm">
  <label class="agree-label">
    <input type="checkbox" id="agreeCheck">
    <a href="/terms/" target="_blank">利用規約</a>に同意する
  </label>
  <button type="submit" id="submitBtn" disabled>送信する</button>
</form>

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  /* pointer-events: none; を追加するとホバーも無効になる */
}

/* 活性化時にトランジションでなめらかに変化 */
button {
  transition: opacity 0.2s, background-color 0.2s;
}

button:not(:disabled) {
  background: #0284c7;
  color: #fff;
  cursor: pointer;
}

const agreeCheck = document.getElementById('agreeCheck');
const submitBtn  = document.getElementById('submitBtn');

agreeCheck.addEventListener('change', () => {
  submitBtn.disabled = !agreeCheck.checked;
});

<form id="multiAgreeForm">
  <div class="check-list">
    <label><input type="checkbox" class="must-check"> 利用規約に同意する</label>
    <label><input type="checkbox" class="must-check"> プライバシーポリシーに同意する</label>
    <label><input type="checkbox" class="must-check"> 18歳以上であることを確認した</label>
  </div>
  <button type="submit" id="multiSubmitBtn" disabled>登録する</button>
</form>

const mustChecks    = document.querySelectorAll('.must-check');
const multiSubmitBtn = document.getElementById('multiSubmitBtn');

function updateBtn() {
  // every() で全チェックボックスが checked かどうか確認
  const allChecked = Array.from(mustChecks).every((cb) => cb.checked);
  multiSubmitBtn.disabled = !allChecked;
}

// 全チェックボックスに同じハンドラを登録
mustChecks.forEach((cb) => cb.addEventListener('change', updateBtn));

const optionChecks = document.querySelectorAll('.option-check');
const nextBtn      = document.getElementById('nextBtn');

function updateNextBtn() {
  // some() で少なくとも1つ checked かどうか確認
  const anyChecked = Array.from(optionChecks).some((cb) => cb.checked);
  nextBtn.disabled = !anyChecked;
}

optionChecks.forEach((cb) => cb.addEventListener('change', updateNextBtn));

<form id="comboForm">
  <div class="field-group">
    <label for="comboEmail">メールアドレス <span class="required">*</span></label>
    <input type="email" id="comboEmail" placeholder="example@mail.com" autocomplete="email">
  </div>
  <label class="agree-label">
    <input type="checkbox" id="comboAgree">
    利用規約に同意する
  </label>
  <button type="submit" id="comboBtn" disabled>送信する</button>
</form>

const comboEmail = document.getElementById('comboEmail');
const comboAgree = document.getElementById('comboAgree');
const comboBtn   = document.getElementById('comboBtn');

function isFormReady() {
  const emailFilled = comboEmail.value.trim() !== '';
  const agreed      = comboAgree.checked;
  return emailFilled && agreed;
}

function syncBtn() {
  comboBtn.disabled = !isFormReady();
}

// チェックボックスと入力フィールドの両方を監視
comboAgree.addEventListener('change', syncBtn);
comboEmail.addEventListener('input',  syncBtn);

const tagChecks = document.querySelectorAll('.tag-check');
const tagBtn    = document.getElementById('tagBtn');
const tagCount  = document.getElementById('tagCount');
const MIN_SELECT = 3;

function updateTagBtn() {
  const checked = Array.from(tagChecks).filter((cb) => cb.checked).length;
  tagCount.textContent = `${checked} / ${tagChecks.length} 選択中`;
  tagBtn.disabled = checked < MIN_SELECT;

  // 残り必要数を伝える
  const remaining = MIN_SELECT - checked;
  tagBtn.title = remaining > 0
    ? `あと${remaining}つ選択してください`
    : '';
}

tagChecks.forEach((cb) => cb.addEventListener('change', updateTagBtn));
// 初期化
updateTagBtn();

/**
 * フォーム内の全インタラクティブ要素を監視してボタンを制御する
 * @param {HTMLFormElement} form
 * @param {HTMLButtonElement} btn
 * @param {() => boolean} isReady - 送信可能かどうかを返す関数
 */
function bindFormReady(form, btn, isReady) {
  function sync() {
    btn.disabled = !isReady();
  }
  // input・change・select すべてのイベントを一括監視（バブリング利用）
  form.addEventListener('input',  sync);
  form.addEventListener('change', sync);
  sync(); // 初期状態を設定
}

// 使い方
const form = document.getElementById('fullForm');
const btn  = document.getElementById('fullFormBtn');

bindFormReady(form, btn, () => {
  const name  = form.querySelector('#fullName').value.trim();
  const email = form.querySelector('#fullEmail').value.trim();
  const agree = form.querySelector('#fullAgree').checked;
  // メール形式の簡易チェック
  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  return name !== '' && emailOk && agree;
});

const form      = document.getElementById('agreeForm');
const submitBtn = document.getElementById('submitBtn');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  // 送信開始 → ボタンを無効化してテキストを変更
  submitBtn.disabled     = true;
  submitBtn.textContent  = '送信中...';

  try {
    await fetch('/api/submit', {
      method: 'POST',
      body: new FormData(form),
    });
    submitBtn.textContent = '送信完了！';
  } catch (err) {
    console.error(err);
    // 失敗したらボタンを再度有効化
    submitBtn.disabled    = false;
    submitBtn.textContent = '送信する';
  }
});