0

Есть задача. У меня есть 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 не интересует.

1 ответ 1

4

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

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>

1
  • 1
    Спасибо за решение)) Работает. Немного дополнил. Так как 2 кнопки, перебрал их циклом for. 6 сен 2019 в 9:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.