Проверка всех checkbox

109

07 июля 2021, 18:00

Есть задача. У меня есть 4 checkbox и 2 кнопки.

<input class="step-agree-checkbox" id="id1" type="checkbox">
<input class="step-agree-checkbox" id="id2" type="checkbox">
<input class="step-agree-checkbox" id="id3" type="checkbox">
<input class="step-agree-checkbox" id="id4" type="checkbox">

<a class="btn-disabled" href="<?= Url::to(['step2', 'safe' => true]) ?>">
    Подать заявление на прием
</a>
<span class="btn-disabled"> Отмена </span>

Мне надо поменять класс кнопкам при условии, что все 4 checkbox имеют состояние checked. Пробовал так

 function enabledBtn() {
        const checkbox = document.querySelectorAll('.step-agree-checkbox'),
            disabledBtn = document.querySelectorAll('.btn-disabled');
        for (let i = 0; i < checkbox.length; i++) {
            checkbox[i].addEventListener('change', function() {
              if(checkbox[i].checked) {
                  for(let j = 0; j < disabledBtn.length; j++) {
                      disabledBtn[j].classList.remove('btn-disabled');
                      disabledBtn[j].classList.add('btn-indigo');
                  }
              } else {
                  for(let j = 0; j < disabledBtn.length; j++) {
                      disabledBtn[j].classList.add('btn-disabled');
                      disabledBtn[j].classList.remove('btn-indigo');
                  }
              }
            });
        }
      }

Но тут он меняет класс у кнопки, если даже у одного checkbox состояние checked. Решение нужно на нативном JS, Jquery не интересует.

Answer 1

Просто вариант покороче )

const checkbox = document.querySelectorAll('.check'), 
  btn = document.getElementById('button'); 
 
checkbox.forEach(c => c.addEventListener('change', e => { 
  btn.classList.toggle('active', !document.querySelectorAll('.check:not(:checked)').length) 
}));

.active { 
  background: red; 
}

<input type="checkbox" class="check"> 
<input type="checkbox" class="check"> 
<input type="checkbox" class="check"> 
<input type="checkbox" class="check"> 
 
<br><br> 
<button id="button">BUTTON</button>