Почему кнопка постоянно disabled?

Question

[Дмитрий Ярощук]

У меня происходит валидация полей input[type=text] и input[type=checkbox] при помощи функции validateInputs(modal).
Проблема заключается в том, что если валидация прошла успешно, то кнопка .button остаётся disabled, а должна быть disabled=false.

HTML

<div class="popup_calc" data-modal="true">
        <div class="popup_dialog">
            <div class="popup_calc_content text-center">
                <button type="button" class="popup_calc_close"><strong>&times;</strong></button>
                 <h2>Калькулятор</h2>
                <h3>Выберите форму балкона <br>и укажите размеры</h3>
                <div class="balcon_icons">
                    <span class="balcon_icons_img do_image_more">
                      <img src="assets/img/modal_calc/balkon/ba_01.png" alt="Тип1"></span>
                    <span class="balcon_icons_img">
                      <img src="assets/img/modal_calc/balkon/ba_02.png" alt="Тип2"></span>
                    <span class="balcon_icons_img">
                      <img src="assets/img/modal_calc/balkon/ba_03.png" alt="Тип3"></span>
                    <span class="balcon_icons_img"> 
                      <img src="assets/img/modal_calc/balkon/ba_04.png" alt="Тип4"></span>
                  </div>
                   <div class="big_img text-center">
                     <img src="assets/img/modal_calc/balkon/type1.png" alt="Тип1">
                     <img src="assets/img/modal_calc/balkon/type2.png" alt="Тип2">
                     <img src="assets/img/modal_calc/balkon/type3.png" alt="Тип3">
                     <img src="assets/img/modal_calc/balkon/type4.png" alt="Тип4">
                   </div>
                <input class="form-control" id="width" type="text" placeholder="Ширина" required>
                <label for="width">мм</label>
                <div class="multiplication"><strong>&times;</strong></div>
                <input class="form-control" id="height" type="text" placeholder="Высота" required>
                <label for="height">мм</label>
                <button class="button popup_calc_button">Далее</button>
            </div>
        </div>
    </div>

JS

function validateInputs(modal) {
    const btn = modal.querySelector('.button');
    const inputs = modal.querySelectorAll('input[type="text"]');
    const checkboxes = modal.querySelectorAll('input[type="checkbox"]');

    const validateInputs = Array.from(inputs).some(input => input.value.trim() === '');
    const validateCheckboxes = Array.from(checkboxes).every(checkbox => checkbox.checked === false);

    if (validateInputs || validateCheckboxes) {
        btn.disabled = true;
    } else {
        btn.disabled = false;
    }
}
export default validateInputs;




import checkNumInputs from "./checkNumInputs";
import validateInputs from "./validateInputs";

function changeModalState(state) {
    const windowForm = document.querySelectorAll('.balcon_icons_img');
    const windowWidth = document.querySelectorAll('#width');
    const windowHeight = document.querySelectorAll('#height');
    const windowType = document.querySelectorAll('#view_type');
    const windowProfile = document.querySelectorAll('.checkbox');

    checkNumInputs('#width');
    checkNumInputs('#height');

    function bindActionToElem(action, elem, prop) {
        elem.forEach((item, index) => {
            item.addEventListener(action, () => {
                const modal = item.closest('[data-modal="true"]');
                console.log(modal);
               switch (item.nodeName) {
                   case 'SPAN' : {
                       state[prop] = index
                       break;
                   }
                   case 'INPUT' : {
                       if (item.getAttribute('type') === 'checkbox') {
                           index === 0 ? state[prop] = 'Холодное' : state[prop] = 'Теплое';
                           elem.forEach((box, jindex) => {
                               box.checked = false;
                               if (index === jindex) {
                                   box.checked = true;
                               }
                           });
                       } else {
                          state[prop] = item.value;
                       }
                       break;
                   }
                   case 'SELECT' : {
                       state[prop] = item.value;
                       break;
                   }
               }
                validateInputs(modal);
               console.log(state);
            });
        });
    }
    bindActionToElem('click', windowForm, 'form');
    bindActionToElem('input', windowWidth, 'width');
    bindActionToElem('input', windowHeight, 'height');
    bindActionToElem('change', windowType, 'type');
    bindActionToElem('change', windowProfile, 'profile');
}
export default changeModalState;

Answer 1

[0xD34F]

Отвечать прямо не буду, предложу ряд встречных вопросов, разберётесь с ними - разберётесь со своим:

Сколько у вас чекбоксов?
Что выдаёт метод every для пустого массива?
Как работает оператор ||?

Comments

[Дмитрий Ярощук]

1.У меня два checkbox. В данном коде они не представлены, они появляются в следующем модальном окне, когда нажимаем на кнопку далее.
2.Метод every для пустого массива возвращает true, так как нет элементов, которые не соответствуют заданному условию.
3. Если хотя бы одно из условий равно true, то выполняется код

[0xD34F]

У меня два checkbox. В данном коде они не представлены, они появляются в следующем модальном окне...

Дмитрий Ярощук, то есть, чекбоксов нет.

...когда нажимаем на кнопку далее.

Это которая не может выйти из состояния disabled, на неё жмете? Толково придумано.