Как отключить кнопку Зарегистрироваться не активной пока все не будет отмечено?

Как сделать так, чтобы кнопка зарегистрироваться не работала пока юзер не выберет пол, не заполинт поле Город и не согласится со всеми чекбоксами?

         <input
              class="popup__input-text"
              type="text"
              value=""
              placeholder="Город"
            />
            <label class="popup__checkbox-gender" for="gender">
              <input
                class="popup__checkbox-gender-input"
                type="checkbox"
                id="gender"
                
              />
              <div class="popup__checkbox-gender-pseudo-wrapper">
                <div
                  class="
                    popup__checkbox-gender-pseudo-item
                    popup__checkbox-gender-pseudo-item--female
                  "
                >
                  Я женщина
                </div>
                <div
                  class="
                    popup__checkbox-gender-pseudo-item
                    popup__checkbox-gender-pseudo-item--male
                  "
                >
                  Я мужчина
                </div>
              </div>
            </label>
          </div>
          <div class="popup__checkboxes">
            <div class="popup__row">
              <label class="popup__checkbox-container popup__checkbox-container-less-text">
                <input
                  class="popup__checkbox"
                  type="checkbox"
                  
                /><span
                  class="popup__checkbox-custom popup__checkbox-custom_checked"
                ></span
                >Подтверждаю, что мне исполнилось 18 лет
              </label>
            </div>
            <div class="popup__row">
              <label class="popup__checkbox-container">
                <input
                  class="popup__checkbox"
                  type="checkbox"
                  name="box3"
                /><span class="popup__checkbox-custom"></span>
                <div class="popup__checkbox-text-container">
                  Подтверждаю согласие на&nbsp;обработку персональных данных,
                  в&nbsp;соответствии с&nbsp;<a class="popup__checkbox-link" href="https://example.com" target="_blank"
                    >Политикой персональных данных ООО &laquo;Юнилевер
                    Русь&raquo;</a
                  >
                </div>
              </label>
            </div>
            <div class="popup__row">
              <label class="popup__checkbox-container">
                <input
                  class="popup__checkbox"
                  type="checkbox"
                  
                /><span class="popup__checkbox-custom"></span>Подтверждаю
                согласие на&nbsp;получение рекламной информации от&nbsp;ООО
                &laquo;Юнилевер Русь&raquo; и&nbsp;ООО &laquo;СРМ Солюшнс&raquo;
              </label>
            </div>
          </div>
          <div class="popup__row">
            <img
              alt=""
              style="width: 100%; height: auto; display: block"
            />
          </div>
          <div class="popup__row">
            <button disabled="disabled" class="popup__btn" type="submit">Зарегистрироваться</button>
          </div>```


Ответы (1 шт):

Автор решения: Rudi

Можно сделать так..

let inpCheck = document.querySelectorAll("input[type='checkbox']");
let inpText = document.querySelector("input[type='text']");
let button = document.querySelector("button[disabled='disabled']");

inpText.addEventListener('input', valid);

inpCheck.forEach(e => {
  e.addEventListener('change', valid);
})

function valid() {
  button.disabled = inpText.value && boxChecked() ? false : true;
}

function boxChecked() {
  return document.querySelectorAll("input:checked").length == inpCheck.length;
}
<input class="popup__input-text" type="text" value="" placeholder="Город" />
<label class="popup__checkbox-gender" for="gender">
              <input
                class="popup__checkbox-gender-input"
                type="checkbox"
                id="gender"
                
              />
              <div class="popup__checkbox-gender-pseudo-wrapper">
                <div
                  class="
                    popup__checkbox-gender-pseudo-item
                    popup__checkbox-gender-pseudo-item--female
                  "
                >
                  Я женщина
                </div>
                <div
                  class="
                    popup__checkbox-gender-pseudo-item
                    popup__checkbox-gender-pseudo-item--male
                  "
                >
                  Я мужчина
                </div>
              </div>
            </label>
</div>
<div class="popup__checkboxes">
  <div class="popup__row">
    <label class="popup__checkbox-container popup__checkbox-container-less-text">
                <input
                  class="popup__checkbox"
                  type="checkbox"
                  
                /><span
                  class="popup__checkbox-custom popup__checkbox-custom_checked"
                ></span
                >Подтверждаю, что мне исполнилось 18 лет
              </label>
  </div>
  <div class="popup__row">
    <label class="popup__checkbox-container">
                <input
                  class="popup__checkbox"
                  type="checkbox"
                  name="box3"
                /><span class="popup__checkbox-custom"></span>
                <div class="popup__checkbox-text-container">
                  Подтверждаю согласие на&nbsp;обработку персональных данных,
                  в&nbsp;соответствии с&nbsp;<a class="popup__checkbox-link" href="https://example.com" target="_blank"
                    >Политикой персональных данных ООО &laquo;Юнилевер
                    Русь&raquo;</a
                  >
                </div>
              </label>
  </div>
  <div class="popup__row">
    <label class="popup__checkbox-container">
                <input
                  class="popup__checkbox"
                  type="checkbox"
                  
                /><span class="popup__checkbox-custom"></span>Подтверждаю
                согласие на&nbsp;получение рекламной информации от&nbsp;ООО
                &laquo;Юнилевер Русь&raquo; и&nbsp;ООО &laquo;СРМ Солюшнс&raquo;
              </label>
  </div>
</div>
<div class="popup__row">
  <img alt="" style="width: 100%; height: auto; display: block" />
</div>
<div class="popup__row">
  <button disabled="disabled" class="popup__btn" type="submit">Зарегистрироваться</button>
</div>

→ Ссылка