Форум

prolk · #1 (**permalink**) 07.01.2019, 23:38

<form name="form">
        <input type="checkbox" name="var" value="var1"> <span>VARIANT 1</span><br>
        <input type="checkbox" name="var" value="var2"> <span>VARIANT 2</span><br>
        <input type="checkbox" name="var" value="var3"> <span>VARIANT 3</span><br>
        <input type="checkbox" name="var" value="var4"> <span>VARIANT 4</span><br>
        <input type="checkbox" name="var" value="var5"> <span>VARIANT 5</span><br>
        <input type="button" value="reset">
    </form>

let res = document.querySelector('.result'),
    btn = document.querySelector('input[type=button]'),
    numCheck = 0,
    maxCheck = 3;

function radioClick(elem) {
    if (!elem.id) {
        numCheck++;
        elem.setAttribute('id', 'check');
    } else {
        numCheck--;
        elem.setAttribute('id', '');
    }
    for (let i = 0; i < form.length; ++i) {
        if (numCheck == maxCheck) {
            if (!form[i].checked) {
                form[i].disabled = true;
            }
        } else if (numCheck < maxCheck) {
            form[i].disabled = false;
        }
    }
}

for (let i = 0; i < form.elements.length; ++i) {
    let forms = form.elements[i];
    forms.onclick = function() {
        if (forms.type == 'checkbox') {
            radioClick(this);
        }
    }

}

Всем привет!!! с Рождеством Христовым!!!!!
вот в чем вопрос, при клике есть условие, что, если тип равен чекбоксу.... disabled, но тип баттон тоже становиться деактевирован, помогите с алгоритмом, как его не затронуть. && тоже пробовал, сунул, куда только можно. Спасибо!!!

prolk · #2 (**permalink**) 08.01.2019, 00:31

решил..... спасибо, если читали!!!!! с праздниками

btn.disabled = false;

нужно отдыхать по больше..... чета перемудрил)))))))))))
но, почему условие не разделяет по типу?

рони · #3 (**permalink**) 08.01.2019, 00:31

prolk,
что хотите сделать?

prolk · #4 (**permalink**) 08.01.2019, 00:55

рони,
1. кнопка должна быть деактивирована, пока не будут выбраны, 3 чекбокса.
2.при выборе 3-х, кнопка активируется.
3.кнопка ведет, куда-либо, или дает другой набор вариантов.
Это я себе такую задачу поставил....
Только кнопка сразу активирована... только после первого выбора она disabled... что не позволительно..... это полный код:

<form name="form">
        <input type="checkbox" name="var" value="var1"> <span>VARIANT 1</span><br>
        <input type="checkbox" name="var" value="var2"> <span>VARIANT 2</span><br>
        <input type="checkbox" name="var" value="var3"> <span>VARIANT 3</span><br>
        <input type="checkbox" name="var" value="var4"> <span>VARIANT 4</span><br>
        <input type="checkbox" name="var" value="var5"> <span>VARIANT 5</span><br>
        <input type="button" value="next">
    </form>
    <div class="result"></div>

let res = document.querySelector('.result'),
    btn = document.querySelector('input[type=button]'),
    numCheck = 0,
    maxCheck = 3;

function radioClick(elem) {
    if (!elem.id) {
        numCheck++;
        elem.setAttribute('id', 'check');
    } else {
        numCheck--;
        elem.setAttribute('id', '');
    }
    for (let i = 0; i < form.length; ++i) {
        if (numCheck == maxCheck) {
            if (!form[i].checked) {
                form[i].disabled = true;
                res.innerHTML = "далее";
                btn.disabled = false;
            }
        } else if (numCheck < maxCheck) {
            form[i].disabled = false;
            res.innerHTML = '';
            btn.disabled = true;
        }
    }
}

for (let i = 0; i < form.elements.length; ++i) {
    let forms = form.elements[i];
    forms.onclick = function() {
        if (forms.type === 'checkbox') {
            radioClick(this);
        }
    }

}

рони · #5 (**permalink**) 08.01.2019, 01:15

prolk,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<form name="form">
        <input type="checkbox" name="var" value="var1"> <span>VARIANT 1</span><br>
        <input type="checkbox" name="var" value="var2"> <span>VARIANT 2</span><br>
        <input type="checkbox" name="var" value="var3"> <span>VARIANT 3</span><br>
        <input type="checkbox" name="var" value="var4"> <span>VARIANT 4</span><br>
        <input type="checkbox" name="var" value="var5"> <span>VARIANT 5</span><br>
        <input type="button" value="next" disabled="disabled">
    </form>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.querySelector('[type="button"]');
    document.querySelector('[name="form"]').addEventListener("click", function(event) {
        var target = event.target;
        if (target.name == "var") {
        var check = document.querySelectorAll('[name="var"]:checked');
        check.length < 3 ?
        btn.setAttribute("disabled", "disabled") :
        btn.removeAttribute("disabled")
        }
    })
});
  </script>
</body>
</html>

prolk · #6 (**permalink**) 08.01.2019, 01:16

может попробовать через метку: flaq =0; если сработает 3-и, тогда поставить flaq = 1; это как вариант

prolk · #7 (**permalink**) 08.01.2019, 01:17

рони,
завтра разберу, спасибо!!!! будет чем заняться....

Форум

Справочник

Discord чат

Курсы javascript