Показать сообщение отдельно
  #4 (permalink)  
Старый 29.08.2022, 23:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием