Изменение выбора входа с помощью радиокнопки не работает должным образом, не в состоянии понять это

Question

У меня проблемы с выяснением того, что не так с моим подходом. У меня есть два варианта флажка (радио), если щелкнуть по одному, то некоторые входы должны измениться как обязательные поля, если по второму щелкнуть, то обязательное поле варианта 1 должно стать необязательным. Я написал сценарий, по которому он работает нормально. ПРОБЛЕМА: если я выберу первый флажок (опция 1), независимо от того, изменю ли я выбор (на опцию 2), появятся обязательные поля выбора 1. они не меняются на ненужные поля.

MyScript:

document.getElementById("pharmacy-nabp-req").addEventListener('change',function(){
document.getElementById("nabp-required").required = this.checked ;
    })

HTML:

    <div class="form-check form-check-inline">
        <%= f.radio_button :submitter_type, 1, checked: false, type: "checkbox", class: "form-check-label", name: "pharmacy-nabp", id: "pharmacy-nabp-req", required: true %>
        <%= label :submitter_type, 'Pharmacy(NABP Required)', class: "form-check-label"%>

    </div>
    <div class="form-check form-check-inline">
        <%= f.radio_button :submitter_type, 2, checked: false, class: "form-check-label", name: "pharmacy-nabp", id: "nabp-notrequired" %>
        <%= label :submitter_type, 'Dispensing Practitioners and Vetenrinarians(NABP Not Required)', class: "form-check-label"%>
    </div>

Обязательное поле HTML:

<div class="form-group row">
               <%= label :nabp, 'nabp', class: "col-sm-3 form-check-label pt-0"%>
                 <div class="col-sm-9">
                 <div class="form-check form-check-inline">
                   <%= f.text_field :nabp, class: "col-sm-10 form-check-label", id: "nabp-required", name: "nabp-required" %>
                   <abbr class="col-sm-6">(For Pharmacies only)</abbr>
                 </div>
                 </div>
             </div>

Извинения, если на этот вопрос очевидно ответить. Я перепробовал все доступные решения от SO, но ничего не вышло. Заранее спасибо.

Answer 1

Нажатие на кнопку радио только вызывает change событие на этой кнопке, а не все другие кнопки в группе радио.

Вы должны добавить прослушиватель событий ко всем кнопкам в группе, и он должен проверить, pharmacy-nabp-req кнопка проверена.

document.getElementsByName("pharmacy-nabp").forEach(function(button) {
  button.addEventListener('change', function() {
    document.getElementById("nabp-required").required = document.getElementById("pharmacy-nabp-req").checked;
  })
});

<input type="radio" name="pharmacy-nabp" id="pharmacy-nabp-req">
<label for="pharmacy-napp-req">Pharmacy(NABP Required)</label>
<input type="radio" name="pharmacy-nabp" id="nap-p-notrequired">
<label for="pharmacy-napp-req">Pharmacy(NABP Not Required)</label>

<div class="form-group row">
  <form>
    <input type="text" id="nabp-required">(For Pharmacies only)
    <input type="submit">
  </form>
</div>