Javascript-форум - При выборе одного input="radio" другой input="radio" станет не активный

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - При выборе одного input="radio" другой input="radio" станет не активный (https://javascript.ru/forum/dom-window/63525-pri-vybore-odnogo-input%3D-radio-drugojj-input%3D-radio-stanet-ne-aktivnyjj.html)

dzhenkins

13.06.2016 09:44

При выборе одного input="radio" другой input="radio" станет не активный

Пример:

<h2>Доставка</h2>
<input type="radio" id="deliveri_1" value="1">
<input type="radio" id="deliveri_2" value="2">
<input type="radio" id="deliveri_3" value="3"> <!-- Если выбрали этот то... -->
<input type="radio" id="deliveri_4" value="4">


<h2>Оплата</h2>
<input type="radio" id="payment_1" value="1">
<input type="radio" id="payment_2" value="2"> <!-- ...то этот станет недоступен -->
<input type="radio" id="payment_3" value="3">
<input type="radio" id="payment_4" value="4">

Нужен скрипт, который будет работать по правилу, что если выбран input с id="deliveri_3", то input с id="payment_2" должен стать неактивным.

Царь Леонид

13.06.2016 10:25

Условия не совсем понятны, так что ли?

<h2>Доставка</h2>
<input type="radio" id="deliveri_1" value="1">
<input type="radio" id="deliveri_2" value="2">
<input type="radio" id="deliveri_3" value="3"> <!-- Если выбрали этот то... -->
<input type="radio" id="deliveri_4" value="4">


<h2>Оплата</h2>
<input type="radio" id="payment_1" value="1">
<input type="radio" id="payment_2" value="2"> <!-- ...то этот станет недоступен -->
<input type="radio" id="payment_3" value="3">
<input type="radio" id="payment_4" value="4">
<script>
var selected = document.getElementById('deliveri_3');
var makeDisable = document.getElementById('payment_2');
selected.addEventListener('change', function(event){
  event.target.checked?makeDisable.disabled=true:makeDisable.disabled=false
})
</script>

dzhenkins

13.06.2016 10:56

Спасибо, это то, что нужно. Но, если убрать выбор с "deliveri_3" на "deliveri_4" (например), то "payment_2" не становится снова активным.

Царь Леонид

13.06.2016 11:41

Точно))

<h2>Доставка</h2>
<form action="">  
<input type="radio" id="deliveri_1" name="deliveri" value="1">
<input type="radio" id="deliveri_2" name="deliveri" value="2">
<input type="radio" id="deliveri_3" name="deliveri" value="3"> <!-- Если выбрали этот то... -->
<input type="radio" id="deliveri_4" name="deliveri" value="4">
</form>

<h2>Оплата</h2>
<input type="radio" id="payment_1" value="1">
<input type="radio" id="payment_2" value="2"> <!-- ...то этот станет недоступен -->
<input type="radio" id="payment_3" value="3">
<input type="radio" id="payment_4" value="4">
<script>
var selected = document.querySelectorAll('input');
var makeDisable = document.getElementById('payment_2');

for(i=0; i<selected.length; i++){
selected[i].addEventListener('change', function(event){
  event.target.id == 'deliveri_3' && event.target.checked?makeDisable.disabled=true:makeDisable.disabled=false
})
}

</script>

dzhenkins

13.06.2016 12:19

Супер, благодарю!

рони	13.06.2016 12:47

Царь Леонид,
а без цикла сможешь?

dzhenkins

13.06.2016 16:12

Возникла ещё одна небольшая задачка:

<h2>Доставка</h2>
<input type="radio" id="deliveri_1" value="1">
<input type="radio" id="deliveri_2" value="2">
<input type="radio" id="deliveri_3" value="3"> <!-- Если выбрали этот то... -->
<input type="radio" id="deliveri_4" value="4"> <!-- Или если выбрали этот то... -->


<h2>Оплата</h2>
<input type="radio" id="payment_1" value="1">
<input type="radio" id="payment_2" value="2"> <!-- ...то этому назначить class="random" -->
<input type="radio" id="payment_3" value="3">
<input type="radio" id="payment_4" value="4">

Собственно, думаю всё понятно. И соответственно class="random" пропадает, если выбираем input с id deliveri_1 или deliveri_2.

Царь Леонид

13.06.2016 17:36

Цитата:

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

Царь Леонид,
а без цикла сможешь?

<h2>Доставка</h2>
<form action="">  
<input type="radio" id="deliveri_1" name="deliveri" value="1">
<input type="radio" id="deliveri_2" name="deliveri" value="2">
<input type="radio" id="deliveri_3" name="deliveri" value="3"> <!-- Если выбрали этот то... -->
<input type="radio" id="deliveri_4" name="deliveri" value="4">
</form>

<h2>Оплата</h2>
<input type="radio" id="payment_1" value="1">
<input type="radio" id="payment_2" value="2"> <!-- ...то этот станет недоступен -->
<input type="radio" id="payment_3" value="3">
<input type="radio" id="payment_4" value="4">
<script>
var selected = document.querySelectorAll('input'),
 makeDisable = document.getElementById('payment_2');

selected.forEach(function(item){
item.addEventListener('change', function(event){
  switch(event.target.id){
    case 'deliveri_3':
      makeDisable.disabled=true
      makeDisable.setAttribute('class', 'random')
      return null; 
    case 'deliveri_4':
      makeDisable.setAttribute('class', 'random')
      makeDisable.disabled=false
      return null;
    default:
      makeDisable.removeAttribute('class', 'random');
      makeDisable.disabled=false
      return null;
  } 
}) 
})
</script>

рони	13.06.2016 18:01

Цитата:

Сообщение от Царь Леонид

forEach

цикл остался

рони	13.06.2016 18:03

Царь Леонид,
на всякий случай classList

Царь Леонид

13.06.2016 18:34

Цитата:

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

цикл остался

<h2>Доставка</h2>
<div id="sendForm">
<form action="">  
<input type="radio" id="deliveri_1" name="deliveri" value="1">
<input type="radio" id="deliveri_2" name="deliveri" value="2">
<input type="radio" id="deliveri_3" name="deliveri" value="3"> <!-- Если выбрали этот то... -->
<input type="radio" id="deliveri_4" name="deliveri" value="4">
</form>
</div>

<h2>Оплата</h2>
<input type="radio" id="payment_1" value="1">
<input type="radio" id="payment_2" value="2"> <!-- ...то этот станет недоступен -->
<input type="radio" id="payment_3" value="3">
<input type="radio" id="payment_4" value="4">
<script>
var selected = document.querySelectorAll('input'),
    makeDisable = document.getElementById('payment_2'),
    formHolder = document.getElementById('sendForm');

formHolder.addEventListener('click', function setDisabled(e){
  if(e.target.tagName == 'INPUT'){
    switch(e.target.id){
    case 'deliveri_3':
      makeDisable.disabled=true
      makeDisable.setAttribute('class', 'random')
      return null; 
    case 'deliveri_4':
      makeDisable.setAttribute('class', 'random')
      makeDisable.disabled=false
      return null;
    default:
      makeDisable.removeAttribute('class', 'random');
      makeDisable.disabled=false
      return null;
  }
 } else if(e.target.tagName == 'DIV'){
      return false
  }
}) 

</script>

Цитата:

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

Царь Леонид,
на всякий случай classList

Знаю про это) Это лучше, чем через setAttribute делать?

рони	13.06.2016 18:51

Цитата:

Сообщение от Царь Леонид

Это лучше, чем через setAttribute делать?

если классов в элементе много, то это лучший вариант.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .random:before {
  text-align: center;
  content: 'random';
  display: block;
  margin-top: 12px;
  margin-left: -16px;
  width: 52px;
  height: 12px;
  border-radius: 6px;
  background: #32CD32;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s;
}

 </style>

  </script>
</head>

<body>

<h2>Доставка</h2>
<form action="">
<input type="radio" id="deliveri_1" name="deliveri" value="1">
<input type="radio" id="deliveri_2" name="deliveri" value="2">
<input type="radio" id="deliveri_3" name="deliveri" value="3"> <!-- Если выбрали этот то... -->
<input type="radio" id="deliveri_4" name="deliveri" value="4">
</form>

<h2>Оплата</h2>
<input type="radio" id="payment_1" value="1">
<input type="radio" id="payment_2" value="2"> <!-- ...то этот станет недоступен -->
<input type="radio" id="payment_3" value="3">
<input type="radio" id="payment_4" value="4">

<script>
var form = document.querySelector('form');
var makeDisable = document.getElementById('payment_2');
var d3 = document.getElementById('deliveri_3');
var d4 = document.getElementById('deliveri_4');
form.addEventListener('change', function(event){
   d3.checked?(makeDisable.disabled=true,makeDisable.checked=false):makeDisable.disabled=false;
  (d3.checked||d4.checked) ? makeDisable.classList.add("random") : makeDisable.classList.remove("random")
})


</script>


</body>
</html>

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