Как правильно задать цикл для querySelectorAll
Приветствую, имеется скрипт, который делает кнопку disabled, пока не выбрана одна из радио (любая). Исходя из информации в интернете понял, что проблема в неверном цикле
Спасибо) Код https://codepen.io/EdemKakMozhem/pen/XWELqoO |
EdemKakMozhem,
у списка элементов не бывает обработчиков событий и состояния checked, делайте цикл по списку, и назначайте каждому элементу списка, то что вы хотели назначить всему списку. понятно? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
const o = document.querySelector('.form')
o.addEventListener('click', e => test())
function test() {
o.querySelector('.btn-next').disabled = !o.querySelector(':checked')
}
test()
})
</script>
</head>
<body>
<form class="form">
<input class="radio" id="block-11m" type="radio" name="radio" value="level-2">
<label for="block-11m">одноэтажный</label>
<input class="radio" id="block-12m" type="radio" name="radio" value="leveд-1">
<label for="block-12m">двухэтажный</label>
<input class="radio" id="block-13m" type="radio" name="radio" value="level-3">
<label for="block-13m">трехэтажный</label>
<button class="btn-next" name="submit" type="submit">ДАЛЕЕ</button>
</form>
</body>
</html>
|
EdemKakMozhem,
с циклом
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", function() {
let form = document.querySelector(".form");
let btn = document.querySelector(".btn-next");
btn.setAttribute("disabled", true);
let radioBtn = document.querySelectorAll('input[type="radio"]');
radioBtn.forEach(function(input) {
input.addEventListener("change", function() {
btn.removeAttribute("disabled");
})
})
})
</script>
</head>
<body>
<form class="form">
<input class="radio" id="block-11m" type="radio" name="radio" value="level-2">
<label for="block-11m">одноэтажный</label>
<input class="radio" id="block-12m" type="radio" name="radio" value="leveд-1">
<label for="block-12m">двухэтажный</label>
<input class="radio" id="block-13m" type="radio" name="radio" value="level-3">
<label for="block-13m">трехэтажный</label>
<button class="btn-next" name="submit" type="submit">ДАЛЕЕ</button>
</form>
</body>
</html>
с делегированием
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", function() {
let form = document.querySelector(".form");
let btn = document.querySelector(".btn-next");
btn.setAttribute("disabled", true);
form.addEventListener("change", function({
target
}) {
if (target.closest('.radio')) this.submit.disabled = false;
})
})
</script>
</head>
<body>
<form class="form">
<input class="radio" id="block-11m" type="radio" name="radio" value="level-2">
<label for="block-11m">одноэтажный</label>
<input class="radio" id="block-12m" type="radio" name="radio" value="leveд-1">
<label for="block-12m">двухэтажный</label>
<input class="radio" id="block-13m" type="radio" name="radio" value="level-3">
<label for="block-13m">трехэтажный</label>
<button class="btn-next" name="submit" type="submit">ДАЛЕЕ</button>
</form>
</body>
</html>
|
Спасибо! Кнопка "далее" листает к следующему слайду с такой же формой, подскажите, можно ли сделать так, чтобы с "радио" снималось событие change, в противном случае оно берется с первого слайда и кнопка "далее" становится активной на всех остальных
|
| Часовой пояс GMT +3, время: 09:22. |