Question

我有一个问题要弄清楚我的方法出了什么问题。我有两个复选框选项（单选），如果单击其中一个，则一些输入必须更改为必填字段，如果单击第二个，则不必选择选项1的必填字段。我写了一个脚本，可以正常工作。问题：如果我选择了第一个复选框（选项1），无论我是否将选择更改为（选项2），都会出现选项1的必填字段。他们没有更改为不需要的字段。

我的剧本：

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>

更改单选按钮输入选择无法正常工作，无法弄清

1 个答案: