1

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

<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" становились отключенными и их нельзя было чекнуть. Если выбран первый радиобаттон из первой группы, то все радиобаттоны из второй становились доступны.

2
  • 1
    jQuery не подключен? если подключен то onClick="$(\"input[name ='group2'\").prop('disabled', false);" и соответственно onClick="$(\"input[name ='group2'\").prop('disabled', true);" 3 дек 2020 в 13:20
  • не подключен, и не планируется, к сожалению...
    – Arsenij
    3 дек 2020 в 14:10

2 ответа 2

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>

1
  • спасибо за решение!
    – Arsenij
    3 дек 2020 в 19:53
1

Через 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>

1
  • спасибо, воспользовался вашим решением
    – Arsenij
    3 дек 2020 в 19:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.