Question 11435 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery with toggle , add "required" attribut into input field when div visible and remove it when its hidden

i’m new with jquery and i have a problem with my codes, i would make the checkbox as a toggle with jquery, and when the checkbox "clicked" and the toggle shows the div, then add required attribut into the checkbox input, and when it "clicked" again and the toggle is hidden then remove the required attribut. But when in the third "click" the toggle is show up but not adding required attribut into the checkbox input,

And I want the code to continue to run like that logic.

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>

Thanks you guys…

Tags:

2

Answers


  1. 0

    Toggling the required property of the #gmb element should do the trick.

    $(document).ready(function () {
    $("#checkbox1").click(function () {
        $("#exmImg").toggle("fast");
        let gmb = $("#gmb").get(0);
        gmb.required = !gmb.required;
    });
});
    Login or Signup to reply.
  2. 0 
     $(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");
          }
       });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search