jQuery Toggle问题：显示/隐藏Div时动态添加/移除input的required属性失效

需求：以checkbox作为切换器，点击后显示#exmImg div时，为id为gmb的input添加required属性；再次点击隐藏该div时，移除该input的required属性。但第三次点击显示div时，required属性未被添加，需要逻辑持续生效。

原代码 #

HTML

<div class="d-flex flex-row align-items-center mb-4">
  <div class="form-outline flex-fill mb-0">
    <label for="checkbox1" class="switch" id="les">
      <input type="checkbox" id="checkbox1" name="user">
      <div class="slider round"></div>
    </label>
  </div>
</div>
<div id="exmImg" style="display: none">
  <label for="expImg" class="form-label">Contoh Gambar</label><br>
  <img src="/imgs/mb.jfif" alt=""  class="img-thumbnail mb-3"><br>
  <label for="gmb" class="lblGmb form-label" id="szz">
    Upload file
  </label>
  <input type="file" class="gambarEx form-control d-none" name="exmImg" id="gmb">
</div>

Script

$(document).ready(function(){
  $("#checkbox1").click(function(){
    $("#exmImg").toggle("fast");
    $("#gmb").attr("required", true);

    $("#checkbox1").click(function(){
          $("#gmb").removeAttr("required");
        });
  });
});

问题原因 #

原代码在click事件处理函数内部又嵌套绑定了一个新的click事件，导致第二次点击后，后续所有点击都会触发移除required的逻辑——事件叠加后，原有的添加属性逻辑被覆盖，无法循环生效。

修正后的代码 #

$(document).ready(function(){
  $("#checkbox1").click(function(){
    // 获取checkbox的选中状态
    const isChecked = $(this).is(":checked");
    // 切换div的显示/隐藏
    $("#exmImg").toggle("fast");
    // 根据选中状态设置required属性
    $("#gmb").prop("required", isChecked);
  });
});

关键说明 #

• 避免嵌套事件绑定：不要在事件处理函数内部重复绑定同元素的事件，否则会导致事件叠加，逻辑混乱。
• 使用prop()操作布尔属性：required是DOM元素的布尔类型属性，prop()比attr()更适合处理这类属性，能准确反映属性的状态。
• 同步checkbox状态与属性操作：直接通过checkbox的checked状态来决定是否添加required，确保和div的显示状态完全同步。

内容的提问来源于stack exchange，提问作者nikkiSix