Как убрать disabled?

Question

[Андрей Кузнецов]

Как убрать disabled в данном коде у "Просто кнопка" только тогда когда сработает событие "input" у всех инпутов?

<form>
  <input type="text" class="input" required>
  <input type="text" class="input" required>
  <input type="text" class="input" required>
  <button type="submit"  class="form-btn">Отправить</button>
</form>
<button disabled type="button" class="btn">Просто кнопка</button>

const massivInput = document.querySelectorAll('.input')
const btnSubmit = document.querySelector('.form-btn')
const btnDisable = document.querySelector('.btn')

massivInput.forEach(element => {
  element.addEventListener('input', () => {
      btnDisable.disabled = false
  })
})

код на codepen https://codepen.io/andrku/pen/dygpjLG

Answer 1

[Михаил Р.]

Через флаг, allInputsFilled изначально установлен на false. В событии "input" для каждого поля ввода мы проверяем, заполнены ли все поля ввода, и, если это так, снимаем атрибут "disabled" с кнопки. Если же хотя бы одно из полей ввода пустое, кнопка остается заблокированной:

<form>
  <input type="text" class="input" required>
  <input type="text" class="input" required>
  <input type="text" class="input" required>
  <button type="submit" class="form-btn">Отправить</button>
</form>
<button disabled type="button" class="btn">Просто кнопка</button>

const massivInput = document.querySelectorAll('.input');
const btnSubmit = document.querySelector('.form-btn');
const btnDisable = document.querySelector('.btn');
let allInputsFilled = false;

massivInput.forEach(element => {
  element.addEventListener('input', () => {
    allInputsFilled = true;
    massivInput.forEach(input => {
      if (!input.value) {
        allInputsFilled = false;
      }
    });
    if (allInputsFilled) {
      btnDisable.disabled = false;
    }
  });
});