Форум

GTMichael · #1 (**permalink**) 30.08.2017, 15:45

У меня есть к примеру 2 radio

<input type="radio name="first" value="no""> ручная
<input type="radio name="first" value="yes"> автоматическая
И далее есть список тоже из них

<input type="radio name="sec" value="1"">
<input type="radio name="sec" value="2">
и тд до 50 допустим
А так же есть текстовый

<input type="text" name="third" >
Нужно чтобы прямо на странице делало если в начале тыкнул ручную то далее где name sec становится неактивной, а текстовый ввод активным, при нажатии на автомат наоборот уже, через script как можно сделать?

Nexus · #2 (**permalink**) 30.08.2017, 15:54

$('[name="first"]').change(function(){
var $t=$(this);
if(!$t.prop('checked'))
return;

$('[name="sec"],[name="third"]').attr('disabled',true);
$('[name="'+($t.val()=='no'?'third':'sec')+'"]').removeAttr('disabled');
});

рони · #3 (**permalink**) 30.08.2017, 16:05

GTMichael,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var f = $('[name="first"]'), r = $('[type="radio"]').not(f), n =  $('[name="third"]');
f.on("click", function() {
var no = this.value == "no";
r.each(function(indx, el){
      no ? $(el).prop({disabled : true, checked : false}) : $(el).removeAttr("disabled")
      });
n.prop({disabled : !no})
})
});
  </script>
</head>

<body>
<input type="radio" name="first" value="no"> ручная
<input type="radio" name="first" value="yes"> автоматическая


<input type="radio" name="sec" value="1">
<input type="radio" name="sec" value="2">


<input type="text" name="third"  disabled="disabled">
</body>
</html>

j0hnik · #4 (**permalink**) 30.08.2017, 16:29

<html>
<head>
</head>
<body>
	<input type="radio" name="first" value="no"> ручная
	<input type="radio" name="first" value="yes"> автоматическая

	<input type="radio" name="sec" value="1">
	<input type="radio" name="sec" value="2">

	<input type="text" name="third" >
	<script>
		document.body.onchange=function(){
			[].forEach.call(document.querySelectorAll('input[name="sec"]'), function(el){
				el.disabled = document.querySelector('input[value="no"]').checked;
		});
			document.querySelector('input[name="third"]').disabled = document.querySelector('input[value="yes"]').checked;
		};
	</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript