Переключатель не работает - состояние не меняется

Question

Я использую учебник, который учит меня, как создавать пользовательские переключатели. Моя проблема в том, что когда я сделал 3 радиокнопки, работает только первая. Невозможно нажать еще два. Когда я нажимаю другую, работает только первая кнопка.

HTML:

    <label for="myRadioId" class="radio">
      <input type="radio" name="myRadioField" id="myRadioId" class="radio__input">
      <div class="radio__radio"></div>
      option 1
    </label><br>
    <label for="myRadioId" class="radio">
      <input type="radio" name="myRadioField" id="myRadioId" class="radio__input">
      <div class="radio__radio"></div>
    option 2
    </label><br>
    <label for="myRadioId" class="radio">
      <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" disabled>
      <div class="radio__radio"></div>
     disabled
    </label>

CSS:

    .radio {
      cursor: pointer;
      display: inline-flex;
    }


    .radio__input {
      display: none;
    }

    .radio__radio {
      width: 1.25rem;
      height: 1.25rem;
      border: 2px solid #d8e4e2;
      border-radius: 50%;
      margin-right: 10px;
      box-sizing: border-box;
      padding: 2px;
    }

    .radio__radio::after {
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      background: #009879;
      border-radius: 50%;
      transform: scale(0);
      transition: transform 0.15s;
    }

    .radio__input:checked + .radio__radio::after {
      transform: scale(1);
    }

Кто-нибудь знает, что нужно сделать, чтобы переключатели заработали?

Answer 1

• A <label> с атрибутом for при щелчке переключает соответствующий флажок / радио-кнопку с тем же id.
• . При установленном флажке радиокнопка снимает все отметки другие переключатели с одинаковыми name.
• идентификаторами должны быть уникальными.

Теперь все ваши переключатели имеют одинаковый идентификатор . Помимо недействительности, это также приводит к тому, что нажатие любой радиокнопки вообще (поскольку все они находятся внутри <label> с for="myRadioId") будет пытаться щелкнуть радиокнопку с идентификатором myRadioId. Ваша первая радио-кнопка совпадает, поэтому на нее нажимают. (Неважно, что два других также будут совпадать, потому что идентификаторы должны существовать только один раз!)

Решение: Используйте разные идентификаторы для каждой радиокнопки:

<label for="myRadioId1" class="radio">
  <input type="radio" name="myRadioField" id="myRadioId1" class="radio__input">
  <div class="radio__radio"></div>
  option 1
</label><br>
<label for="myRadioId2" class="radio">
  <input type="radio" name="myRadioField" id="myRadioId2" class="radio__input">
  <div class="radio__radio"></div>
option 2
</label><br>
<label for="myRadioId3" class="radio">
  <input type="radio" name="myRadioField" id="myRadioId3" class="radio__input" disabled>
  <div class="radio__radio"></div>
 disabled
</label>

(Кроме того, им, вероятно, тоже понадобится value, чтобы вы могли узнать, какой из них был нажат в конце, просмотрев данные формы.)

Answer 2

Вам просто нужно изменить идентификатор каждого входного тега, а также метку «для» атрибута, тогда он будет работать отлично. например:
метка для = "link1" & input id = "link1"
метка для = "link2" & input id = "link2"
метка для = "link3" & input id = "link3"