Javascript-форум - Переключение radio-кнопок определенное количество раз

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Переключение radio-кнопок определенное количество раз (https://javascript.ru/forum/misc/64755-pereklyuchenie-radio-knopok-opredelennoe-kolichestvo-raz.html)

k_DizeL

02.09.2016 19:05

Переключение 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. Не нашел инфы, даже, о том, как вообще запретить смену радиокнопок, не то что отследить их смену

k_DizeL

02.09.2016 19:13

Двигаюсь в сторону:

$("input:radio").prop('disabled', true);

Но как применить это условию после того, как сменили радиокнопку 3 раз.

Manyasha

02.09.2016 20:36

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 перебирать, а только те, что нужны.

рони	02.09.2016 20:36

k_DizeL,
а кнопки можно обернуть в div.класс?

k_DizeL

02.09.2016 20:42

рони, можно и обернуть по группам bq1, bq2, bq3, bq4, bqN... например.

рони	02.09.2016 20:42

Manyasha,
нужно индекс кнопки учитывать иначе можно случайно нажать одно и тоже 2 раза, а потом уже переключить не получится.

k_DizeL

02.09.2016 20:55

рони, а как учесть? Баг все же присутствует

рони	02.09.2016 21:33

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>

k_DizeL

02.09.2016 23:02

рони, спасибо большое! А каким образом можно сделать так, что бы:
в первом блоке отметил радио кнопку. То во втором блоке если, я выберу одно радиокнопку то в первом блоке всем пропишется disable. И так для всех блоков в котором хотя бы одна радиокнопка активна.

рони	02.09.2016 23:53

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>

k_DizeL

03.09.2016 00:04

рони, да, спасибо все работает. Вот только я могу совершить выбор в каждом из блоков 2 раза, а должно быть 3

$(function() {
    $(".blockq").each(function(c, a) {
        var b = $("input", a);
        $(a).on("click", "input", function(a) {
            $(this).addClass("bl");
            b.prop("disabled", 3 < b.filter(".bl").length)
        })
    });
    var a = $(".blockq");
    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))
            })
        })
    })
});

рони	03.09.2016 00:10

Цитата:

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

Вот только я могу совершить выбор в каждом из блоков 2 раза, а должно быть 3

не понимаю логики и зачем мешать один код с другим?

k_DizeL

03.09.2016 00:15

рони, в первой группе радиокнопок до их disabled я могу переключать 3 раза (1 раз только выбрать, остальные 2 раза переместить).

b.prop("disabled", 3 < b.filter(".bl").length)

Как только добавил часть скрипта, в которой активен только тот блок радиокнопок в котором сейчас "щелкаю", а тот блок радиокнопок в котором уже что-то выбрал стал disabled. Имею возможность только 2 раза щелкнуть, а после весь блок радиокнопок неактивны. Видимо фишка в этой части

c.prop("disabled", c.filter(".bl").length > +(a == d))

не могу понять как она влияет

рони	03.09.2016 01:25

k_DizeL,
не осилил вашего описания, алгоритм построен на присутствии в блоке элементов с классом bl, если в блоке их больше 1 инпуты в блоке отключаются. пишите далее сами под свою логику на основе этого алгоритма или придумайте свой.

k_DizeL

03.09.2016 01:36

рони, а нужно что бы в блоке могло быть от 1 до 3 .bl

рони	03.09.2016 07:47

k_DizeL,
:) нихт ферштейн!

Manyasha

03.09.2016 08:57

Цитата:

Сообщение от рони (Сообщение 427543)

исправляю свой вариант и доделываю под

Цитата:

Сообщение от k_DizeL (Сообщение 427553)

во втором блоке если, я выберу одну радиокнопку то в первом блоке всем пропишется disable.

<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=[],
		oldVal=[],
		oldName;
	[].forEach.call(radio, function(el, ind) {
	   el.addEventListener("click", function(){
		  var name = this.name;
		  if (oldVal[name] != ind){
			  if (counter[name] != undefined){
				counter[name]+=1;
			  } else{
				counter[name] = 1;
			  }
			  if (counter[name]>2){
				$("[name='" + name + "']").prop('disabled', true);
			  }
			  oldVal[name] = ind;
			  if (oldName && oldName != name){
				$("[name='" + oldName + "']").prop('disabled', true);
			  }
			  oldName = name;
		  }
	   })
	})
});
</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="q6" /><label for="q11">1</label><br />
<input type="radio" name="t2" id="q7" /><label for="q22">2</label><br />
<input type="radio" name="t2" id="q8"/><label for="q33">3</label><br />
<input type="radio" name="t2" id="q9" /><label for="q44">4</label><br />
<input type="radio" name="t2" id="q10" /><label for="q55">5</label><br />

<p> ТРЕТИЙ БЛОК </p>
<input type="radio" name="t3" id="q11" /><label for="q11">1</label><br />
<input type="radio" name="t3" id="q12" /><label for="q22">2</label><br />
<input type="radio" name="t3" id="q13"/><label for="q33">3</label><br />
<input type="radio" name="t3" id="q14" /><label for="q44">4</label><br />
<input type="radio" name="t3" id="q15" /><label for="q55">5</label><br />

k_DizeL

04.09.2016 10:04

Manyasha, да, то что нужно. А каким образом можно указать исключение. Например для name="t3" можно 4 раза переключить до disable всего блока

Manyasha

05.09.2016 11:48

Rise, хорошо, исправляюсь!
k_DizeL, например, так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function() {
    var counter={},
        oldVal={},
        oldName;
	var limit = {t1: 2, t2: 2, t3: 3};
	$("[type='radio']").on("click", function() {
		var name = this.name;
        if (oldVal[name] != this.id){
			if (counter[name] != undefined){
				counter[name]+=1;
			} else{
				counter[name] = 1;
			}
			if (counter[name]>limit[name]){
				$("[name='" + name + "']").prop('disabled', true);
			}
			oldVal[name] = this.id;
			if (oldName && oldName != name){
				$("[name='" + oldName + "']").prop('disabled', true);
			}
			oldName = name;
        }
		
	});
});
</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="q6" /><label for="q11">1</label><br />
<input type="radio" name="t2" id="q7" /><label for="q22">2</label><br />
<input type="radio" name="t2" id="q8"/><label for="q33">3</label><br />
<input type="radio" name="t2" id="q9" /><label for="q44">4</label><br />
<input type="radio" name="t2" id="q10" /><label for="q55">5</label><br />
 
<p> ТРЕТИЙ БЛОК </p>
<input type="radio" name="t3" id="q11" /><label for="q11">1</label><br />
<input type="radio" name="t3" id="q12" /><label for="q22">2</label><br />
<input type="radio" name="t3" id="q13"/><label for="q33">3</label><br />
<input type="radio" name="t3" id="q14" /><label for="q44">4</label><br />
<input type="radio" name="t3" id="q15" /><label for="q55">5</label><br />

k_DizeL

05.09.2016 19:32

Manyasha, спасибо огромное, то что нужно!

Manyasha

08.09.2016 11:28

Rise,
исправилась:agree:
Поправила свой последний пост (№20).

Часовой пояс GMT +3, время: 11:51.