Как связать группы radio button

Question

У меня есть две группы радиобаттонов

<div class="radio">
    <div class="radio__group">
        <label><input type="radio" value="value1" name="group1" checked><span>Группа 1 Значение 1</span></label>
        <label><input type="radio" value="value2" name="group1"><span>Группа 1 Значение 2</span></label>
    </div>
    <div class="radio__group">
        <label><input type="radio" value="value1" name="group2" checked><span>Группа 2 Значение 1</span></label>
        <label><input type="radio" value="value2" name="group2"><span>Группа 2 Значение 2</span></label>
    </div>
</div>

Как сделать так, чтобы если был выбран радиобаттон из первой группы name="group1" со значением 2 value="value2", то оба радиобаттона из второй группы name="group2" становились отключенными и их нельзя было чекнуть. Если выбран первый радиобаттон из первой группы, то все радиобаттоны из второй становились доступны.

Answer 1

Можно сделать таким образом как вариант!

const group1 = document.querySelectorAll('input[name="group1"]');
const group2 = document.querySelectorAll('input:not([name="group1"])');

group1.forEach(group => group.addEventListener('change', checkRadio))

function checkRadio(e) {
  group2.forEach(group => e.target.value == 'value2' 
    ? group.setAttribute('disabled', true)
    : group.removeAttribute('disabled'))
}

<div class="radio">
    <div class="radio__group">
        <label><input type="radio" value="value1" name="group1" checked><span>Группа 1 Значение 1</span></label>
        <label><input type="radio" value="value2" name="group1"><span>Группа 1 Значение 2</span></label>
    </div>
    <div class="radio__group">
        <label><input type="radio" value="value1" name="group2" checked><span>Группа 2 Значение 1</span></label>
        <label><input type="radio" value="value2" name="group2"><span>Группа 2 Значение 2</span></label>
    </div>
</div>

Answer 2

Через addEventListener и атрибуты

const group1 = document.querySelectorAll('[name=group1]');
const group2 = document.querySelectorAll('[name=group2]');

group1[0].addEventListener('change', (event) => {
  console.log('включаем');
  group2.forEach((n) => n.removeAttribute('disabled'));
});

group1[1].addEventListener('change', (event) => {
  console.log('выключаем');
  group2.forEach((n) => n.setAttribute('disabled', true));
})

<div class="radio">
    <div class="radio__group">
        <label><input type="radio" value="value1" name="group1" checked><span>Группа 1 Значение 1</span></label>
        <label><input type="radio" value="value2" name="group1"><span>Группа 1 Значение 2</span></label>
    </div>
    <div class="radio__group">
        <label><input type="radio" value="value1" name="group2" checked><span>Группа 2 Значение 1</span></label>
        <label><input type="radio" value="value2" name="group2"><span>Группа 2 Значение 2</span></label>
    </div>
</div>

БЛОГ НА HUSL

Как связать группы radio button

Ответы (2 шт):