Как отключить кнопку Зарегистрироваться не активной пока все не будет отмечено?
Как сделать так, чтобы кнопка зарегистрироваться не работала пока юзер не выберет пол, не заполинт поле Город и не согласится со всеми чекбоксами?
<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">
Подтверждаю согласие на обработку персональных данных,
в соответствии с <a class="popup__checkbox-link" href="https://example.com" target="_blank"
>Политикой персональных данных ООО «Юнилевер
Русь»</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>Подтверждаю
согласие на получение рекламной информации от ООО
«Юнилевер Русь» и ООО «СРМ Солюшнс»
</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">
Подтверждаю согласие на обработку персональных данных,
в соответствии с <a class="popup__checkbox-link" href="https://example.com" target="_blank"
>Политикой персональных данных ООО «Юнилевер
Русь»</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>Подтверждаю
согласие на получение рекламной информации от ООО
«Юнилевер Русь» и ООО «СРМ Солюшнс»
</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>