Форум

EdemKakMozhem · #1 (**permalink**) 29.08.2022, 22:02

Приветствую, имеется скрипт, который делает кнопку disabled, пока не выбрана одна из радио (любая). Исходя из информации в интернете понял, что проблема в неверном цикле

Спасибо)

Код
https://codepen.io/EdemKakMozhem/pen/XWELqoO

рони · #2 (**permalink**) 29.08.2022, 22:50

EdemKakMozhem,
у списка элементов не бывает обработчиков событий и состояния checked, делайте цикл по списку, и назначайте каждому элементу списка, то что вы хотели назначить всему списку. понятно?

ksa · #3 (**permalink**) 29.08.2022, 22:57

Сообщение от EdemKakMozhem

проблема в неверном цикле

Судя по задаче цикл там не нужен...

<!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>

рони · #4 (**permalink**) 29.08.2022, 23:00

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>

EdemKakMozhem · #5 (**permalink**) 29.08.2022, 23:39

Спасибо! Кнопка "далее" листает к следующему слайду с такой же формой, подскажите, можно ли сделать так, чтобы с "радио" снималось событие change, в противном случае оно берется с первого слайда и кнопка "далее" становится активной на всех остальных

Форум

Справочник

Discord чат

Курсы javascript