Как сделать зависимые радиокнопки с использованием data-*?

Question

[Алексей]

Как сделать чтобы часть кнопок из набора№2 становилась неактивной при выборе радио кнопки из набора№1.
name и value нельзя использовать, нужно с использованием data-type.

<!--набор№1-->
<input type="radio" name="select1" data-type1="1" value="r34324rrt">
<label>fgbrw</label>
<input type="radio" name="select1" data-type1="2" value="46y4retgrtgr">
<label>rfgbertb</label>
<input type="radio" name="select1" data-type1="3"  value="r643tgrtgrtg">
<label>gfbgb</label>
 
<!--набор№2-->
<input  data-type2="1" name="select2" type="radio" value="xуц"/>
<input  data-type2="1" name="select2" type="radio" value="sdfsdcsa"/>
<input  data-type2="2" name="select2" type="radio" value="ergewrgewrcv"/>
<input  data-type2="2" name="select2" type="radio" value="fetbewfwrethnrs"/>
<input  data-type2="3" name="select2" type="radio" value="trukfva"/>
<input  data-type2="3" name="select2" type="radio" value="sdfgsdtrb"/>

при выборе data-type1=1 становились неактивными с data-type2="2″ и data-type2="3″
при выборе data-type1=2 становились неактивными с data-type2="1″ и data-type2="3″
при выборе data-type1=3 становились неактивными с data-type2="1″ и data-type2="2″

или
при выборе data-type1=1 становись АКТИВНЫМИ data-type2=1

или
если data-* могут быть одинаковые в разных наборах, то просто везде data-type- и активные только те у которых data-type совпадает из 1 и 2 набора при выборе из 1го

Answer 1

[0xD34F]

Как блокировать элементы в зависимости от значения data-атрибута:

const disableByType = (elements, type) =>
  elements.forEach(n => n.disabled = n.dataset.type2 !== type);

Блокируем:

// можно сделать делегированный обработчик
document.addEventListener('change', ({ target: { dataset: { type1 } } }) => {
  if (type1) {
    disableByType(document.querySelectorAll('[data-type2]'), type1);
  }
});

// или, назначить обработчик каждой радиокнопке индивидуально
const radios1 = document.querySelectorAll('[data-type1]');
const radios2 = document.querySelectorAll('[data-type2]');
const onChange = e => disableByType(radios2, e.target.dataset.type1);

radios1.forEach(n => n.addEventListener('change', onChange));

Comments

[Алексей]

не могу в коде разобраться. Не могли бы немного для другого примера
Как сделать чтобы часть кнопок из набора№2 становилась неактивной при выборе радио кнопки из набора№1.
name и value нельзя использовать, нужно с использованием data-type.

<!--набор№1-->
<input type="radio" name="select1" value="v1">
<label>v1111</label>
<input type="radio" name="select1" value="v2">
<label>v2222</label>
<input type="radio" name="select1" value="v3">
<label>v3333</label>
 
<!--набор№2-->
<input  data-type="vv1" name="select2" type="radio" value="x1"/>
<input  data-type="vv1" name="select2" type="radio" value="x2"/>
<input  data-type="vv2" name="select2" type="radio" value="x3"/>
<input  data-type="vv2" name="select2" type="radio" value="x4"/>
<input  data-type="vv3" name="select2" type="radio" value="x5"/>
<input  data-type="vv3" name="select2" type="radio" value="x6"/>

при выборе value="v1″ становились неактивными с data-type="vv2″ и data-type="vv3″
при выборе value="v2″ становились неактивными с data-type="vv1″ и data-type="vv1″
при выборе value="v3″ становились неактивными с data-type="vv1″ и data-type="vv3″

[0xD34F]

Не могли бы...

Мог бы. Но чё-то сомневаюсь - а надо ли? Очевидно, вам моя помощь не очень-то и нужна - получив ответ, вы, вместо того, чтобы ясно и чётко указать, решает ли он заявленную проблему, начинаете выдумывать новые вопросы, перекраивая текст уже заданного.

[Алексей]

что такое e и n в вашем коде?

[0xD34F]

что такое e и n в вашем коде?

А, то есть вы вообще ни хрена не знаете. Это объект события и текущий элемент второго набора.

Ответ обновил.

[Алексей]

0xD34F, спасибо, но вы используете value ? но это я так его только в примере написал, оно может быть каким угодно...

[0xD34F]

Обновил ответ ещё раз, но на этом всё, хватит. Взбредёт в голову изменить вопрос ещё раз - здесь этого делать не надо. Думаю, вам стоит отправиться на фриланс-биржу - там ваши глупость и свинство будут терпеть с куда большей охотой, чем я здесь. За деньги это нетрудно.

[Алексей]

послушайте, если я чего не значит, это что вы можете обзывать меня глупым...
вы тоже много чего не знаете... прямо из школьной программы...