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)

При выборе одного 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" должен стать неактивным.

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

<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>

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

Точно))

<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>

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

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

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

<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.

Цитата:

Сообщение от рони (Сообщение 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>

Цитата:

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

forEach

цикл остался

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