<label>КНОПКА 1<input type="radio" name="radio" /></label>
<label>КНОПКА 2<input type="radio" name="radio" /></label>
-
Что значит заблокировалась?– Air7 окт 2021 в 6:22
-
Не нужно править ответы. Дополняйте собственный вопрос или уточняйте в комментариях ниже.– UModeL7 окт 2021 в 6:46
-
1@Arthur прекратите несвязанные правки. Задайте новый вопрос– Alexey Ten7 окт 2021 в 6:49
Добавить комментарий
|
2 ответа
Назначаем обработчик кнопкам, в котором устанавливаем свойство disabled = true
всем кнопкам, кроме нажатой:
const aBtns = document.querySelectorAll('[name="radio"]');
aBtns.forEach(btn => {
btn.addEventListener('click', function(ev) {
ev.stopPropagation();
aBtns.forEach(btn => {
btn.disabled = btn != this;
});
})
});
<label>КНОПКА 1<input type="radio" name="radio" /></label>
<label>КНОПКА 2<input type="radio" name="radio" /></label>
<label>КНОПКА 3<input type="radio" name="radio" /></label>
<label>КНОПКА 4<input type="radio" name="radio" /></label>
Без скрипта (плюс сто к производительности) и с лейблами, приведенными в правильный вид:
.container {
display: inline-block;
border: 1px solid navy;
position: relative;
}
.locker {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
backdrop-filter: blur(1px);
background-color: rgba(255, 255, 255, 0.5);
display: none;
}
[name="radio"],
[name="radio"]+label {
position: relative;
}
[name="radio"]:checked,
[name="radio"]:checked+label {
z-index: 2;
}
[name="radio"]:checked~.locker {
display: block;
}
<div class="container">
<input type="radio" id="radio1" name="radio" /><label for="radio1">КНОПКА 1</label><br/>
<input type="radio" id="radio2" name="radio" /><label for="radio2">КНОПКА 2</label><br/>
<input type="radio" id="radio3" name="radio" /><label for="radio3">КНОПКА 3</label><br/>
<div class="locker"></div>
</div>
-
Имеет право на жизнь. Но, как с расширяемостью? Что, если будет несколько групп с разным количеством кнопок?– UModeL8 окт 2021 в 10:02
-
@UModeL, каждая группа просто суется в свой контейнер. главное тут чтобы
.locker
был последним и доступен для css после чекбоксов (для этого и вывел их из лейблов, тем более, что так правильнее). количество радиокнопок может быть любым, равно и как их расположение, а также наличие любых других элементов. 8 окт 2021 в 11:39 -
любым то любым, но... другая группа - другой
name
, а значит, ещё CSS добавится. То же самое и с количеством кнопок - каждой добавляется уникальныйid
, хотя при заявленных условиях, проще получать выбор по индексу.– UModeL8 окт 2021 в 19:38 -
на
name
я завязался исключительно от лени писать input[type="radio"]. так что можно использовать везде. а уникальный id у радиокнопок-инпутов и должен быть, если по-хорошему 9 окт 2021 в 19:32