Как сделать так чтобы нажав на одну кнопку вторая заблокировалась? Javascript

Question

<label>КНОПКА 1<input type="radio" name="radio" /></label>
<label>КНОПКА 2<input type="radio" name="radio" /></label>

Answer 1

Назначаем обработчик кнопкам, в котором устанавливаем свойство 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>

Answer 2

Без скрипта (плюс сто к производительности) и с лейблами, приведенными в правильный вид:

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

БЛОГ НА HUSL

Как сделать так чтобы нажав на одну кнопку вторая заблокировалась? Javascript

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