Jquery 带有切换，当 div 可见时将“必需”属性添加到输入字段中，当它隐藏时将其删除

Question

我是 jquery 的新手，我的代码有问题，我会将复选框作为 jquery 的切换开关，当复选框“单击”并且切换显示 div 时，然后将所需的属性添加到复选框输入中，然后当它再次“点击”并且切换被隐藏时，然后删除所需的属性。 但是当在第三次“点击”时切换显示但没有将所需的属性添加到复选框输入中，

我希望代码继续像那个逻辑一样运行。

Here is my codes
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
  <script>
                            
                            $(document).ready(function(){
                              $("#checkbox1").click(function(){
                                $("#exmImg").toggle("fast");
                                $("#gmb").attr("required", true);

                                $("#checkbox1").click(function(){
                                      $("#gmb").removeAttr("required");
                                    });
                              });
                            });
                      
          
  </script>

谢谢你们...

Answer 1

切换#gmb元素的required属性应该可以解决问题。

$(document).ready(function () {
    $("#checkbox1").click(function () {
        $("#exmImg").toggle("fast");
        let gmb = $("#gmb").get(0);
        gmb.required = !gmb.required;
    });
});

Answer 2

 $(document).ready(function(){                   
       $("#checkbox1").change(function(e){              $ 
          ("#exmImg").toggle("fast");            
          if(e.target.checked) {             
            $("#exmImg").css("display","block");               
            $("#gmb").attr("required", true);
          } else{                                  
            $("#exmImg").css("display","none");  
            $("#gmb").removeAttr("required");
          }
       });
});