Переключение radio-кнопок определенное количество раз
<p> ПЕРВЫЙ БЛОК </p> <input type="radio" name="t1" id="q1" /><label for="q1">1</label><br /> <input type="radio" name="t1" id="q2" /><label for="q2">2</label><br /> <input type="radio" name="t1" id="q3"/><label for="q3">3</label><br /> <input type="radio" name="t1" id="q4" /><label for="q4">4</label><br /> <input type="radio" name="t1" id="q5" /><label for="q5">5</label><br /> <p> ВТОРОЙ БЛОК </p> <input type="radio" name="t2" id="q11" /><label for="q11">1</label><br /> <input type="radio" name="t2" id="q22" /><label for="q22">2</label><br /> <input type="radio" name="t2" id="q33"/><label for="q33">3</label><br /> <input type="radio" name="t2" id="q44" /><label for="q44">4</label><br /> <input type="radio" name="t2" id="q55" /><label for="q55">5</label><br /> <p> ТРЕТИЙ .... и т.д. Каким образом можно реализовать так, что бы переключить radio кнопку можно было не больше 2 раз в блоке? p.s. Не нашел инфы, даже, о том, как вообще запретить смену радиокнопок, не то что отследить их смену |
Двигаюсь в сторону:
$("input:radio").prop('disabled', true);
Но как применить это условию после того, как сменили радиокнопку 3 раз. |
k_DizeL,
посмотрите такой вариант:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function() {
var radio = document.querySelectorAll("[type='radio']");
var counter=[];
[].forEach.call(radio, function(el) {
el.addEventListener("click", function(){
var name = this.name;
if (counter[name] != undefined){
counter[name]+=1;
} else{
counter[name] = 1;
}
console.log(counter[name])
if (counter[name]>2){
$("[name='" + name + "']").prop('disabled', true);
}
})
})
});
</script>
<p> ПЕРВЫЙ БЛОК </p>
<input type="radio" name="t1" id="q1" /><label for="q1">1</label><br />
<input type="radio" name="t1" id="q2" /><label for="q2">2</label><br />
<input type="radio" name="t1" id="q3"/><label for="q3">3</label><br />
<input type="radio" name="t1" id="q4" /><label for="q4">4</label><br />
<input type="radio" name="t1" id="q5" /><label for="q5">5</label><br />
<p> ВТОРОЙ БЛОК </p>
<input type="radio" name="t2" id="q11" /><label for="q11">1</label><br />
<input type="radio" name="t2" id="q22" /><label for="q22">2</label><br />
<input type="radio" name="t2" id="q33"/><label for="q33">3</label><br />
<input type="radio" name="t2" id="q44" /><label for="q44">4</label><br />
<input type="radio" name="t2" id="q55" /><label for="q55">5</label><br />
Только конечно лучше не все radio перебирать, а только те, что нужны. |
k_DizeL,
а кнопки можно обернуть в div.класс? |
рони, можно и обернуть по группам bq1, bq2, bq3, bq4, bqN... например.
|
Manyasha,
нужно индекс кнопки учитывать иначе можно случайно нажать одно и тоже 2 раза, а потом уже переключить не получится. |
рони, а как учесть? Баг все же присутствует
|
k_DizeL,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".bg").each(function(c, a) {
var b = $("input", a);
$(a).on("click", "input", function(a) {
$(this).addClass("bl");
b.prop("disabled", 1 < b.filter(".bl").length)
})
})
});
</script>
</head>
<body>
<p> ПЕРВЫЙ БЛОК </p><div class="bg">
<input type="radio" name="t1" id="q1" /><label for="q1">1</label><br />
<input type="radio" name="t1" id="q2" /><label for="q2">2</label><br />
<input type="radio" name="t1" id="q3"/><label for="q3">3</label><br />
<input type="radio" name="t1" id="q4" /><label for="q4">4</label><br />
<input type="radio" name="t1" id="q5" /><label for="q5">5</label><br />
</div>
<p> ВТОРОЙ БЛОК </p><div class="bg">
<input type="radio" name="t2" id="q11" /><label for="q11">1</label><br />
<input type="radio" name="t2" id="q22" /><label for="q22">2</label><br />
<input type="radio" name="t2" id="q33"/><label for="q33">3</label><br />
<input type="radio" name="t2" id="q44" /><label for="q44">4</label><br />
<input type="radio" name="t2" id="q55" /><label for="q55">5</label><br />
</div>
</body>
</html>
|
рони, спасибо большое! А каким образом можно сделать так, что бы:
в первом блоке отметил радио кнопку. То во втором блоке если, я выберу одно радиокнопку то в первом блоке всем пропишется disable. И так для всех блоков в котором хотя бы одна радиокнопка активна. |
k_DizeL,
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var a = $(".bg");
a.each(function(d, b) {
$(b).on("click", "input", function() {
$(this).addClass("bl");
a.each(function(a, b) {
var c = $("input", b);
c.prop("disabled", c.filter(".bl").length > +(a == d))
})
})
})
});
</script>
</head>
<body>
<p> ПЕРВЫЙ БЛОК </p><div class="bg">
<input type="radio" name="t1" id="q1" /><label for="q1">1</label><br />
<input type="radio" name="t1" id="q2" /><label for="q2">2</label><br />
<input type="radio" name="t1" id="q3"/><label for="q3">3</label><br />
<input type="radio" name="t1" id="q4" /><label for="q4">4</label><br />
<input type="radio" name="t1" id="q5" /><label for="q5">5</label><br />
</div>
<p> ВТОРОЙ БЛОК </p><div class="bg">
<input type="radio" name="t2" id="q11" /><label for="q11">1</label><br />
<input type="radio" name="t2" id="q22" /><label for="q22">2</label><br />
<input type="radio" name="t2" id="q33"/><label for="q33">3</label><br />
<input type="radio" name="t2" id="q44" /><label for="q44">4</label><br />
<input type="radio" name="t2" id="q55" /><label for="q55">5</label><br />
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 02:16. |