How to enable/disable all input controls inside a form element using jQuery ?

Give an HTML document containing a form element. The form element contains input elements, option elements and button elements. The task to enable or disable all input controls inside a form using jQuery. It can be be done by using prop() method.

Using prop() Method: It is used to set or return the properties and values for the selected elements.

Syntax:

$(selector).prop( property, value )

Example 1: In this example, the .prop() method is used to disable all input controls inside a form element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to enable and disable all input
        controls inside a form using jQuery?
    </title>
      
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1> 
      
    <h3>
        How to enable and disable all input
        controls inside a form using jQuery ?
    </h3>
    <hr>
      
    <form id="GFG"> 
        <h3 style = "color:green;" >
            GFG Registration Form
        </h3>
          
        <label><h4>Name:</h4></label>
        <input type="text">
              
        <label><h4>Gender:</h4></label>
          
        <label><input type="radio" name="sex"> 
            Male
        </label>     
          
        <label><input type="radio" name="sex">
            Female
        </label>
          
        <label><h4>Address:</h4></label>
          
        <textarea></textarea>
          
        <label><h4>Country:</h4></label>
          
        <select>
            <option>select</option>
        </select>
          
        <br><br>
          
        <button type="button">Submit</button>
        <button type="button">Reset</button>
    </form>
      
    <br><br>
      
    <input onclick="enable_disable()" type="button"
                class="slide-toggle" value="Disable"
                id="myButton1">
    </input>
  
    <script type="text/javascript">
        function enable_disable() { 
            $("#GFG :input").prop("disabled", true);
        }
    </script>
</body>
  
</html>        

chevron_right






                        filter_none








Output:




    

  • Before Click on the Button:
    

    • 

  • After Click on the Button:
    

    • 



Example 2: In this example, the .prop() method is used to enable all input controls inside a form.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title> 


        How to enable/disable all input controls 


        inside a form using jQuery? 


    </title> 


  


    <script src= 


"https://code.jquery.com/jquery-1.12.4.min.js"> 


    </script> 


</head> 


  


<body style="text-align:center;"> 


  


    <h1 style = "color:green;" >  


        GeeksForGeeks  


    </h1>  


  


    <h3> 


        How to enable and disable all input  


        controls inside a form using jQuery ? 


    </h3> 


    <hr> 


  


    <form id="GFG">  


        <h3 style = "color:green;" > 


            GFG Registration Form 


        </h3> 


          


        <label><h4>Name:</h4></label> <input type="text"> 


          


        <label><h4>Gender:</h4></label> 


        <label><input type="radio" name="sex"> Male</label>      


        <label><input type="radio" name="sex"> Female</label> 


          


        <label><h4>Address:</h4></label> 


        <textarea></textarea> 


          


        <label><h4>Country:</h4></label> 


        <select> 


            <option>select</option> 


        </select> 


          


        <br><br> 


          


        <button type="button">Submit</button> 


        <button type="button">Reset</button> 


    </form> 


      


    <br><br> 


      


    <input onclick="enable_disable()" type="button"


            class="slide-toggle" value="Enable"


            id="myButton1"> 


    </input> 


  


    <script type="text/javascript"> 


        $(document).ready(function() { 


            $("#GFG :input").prop("disabled", true); 


        }); 


          


        function enable_disable() {  


            $("#GFG :input").prop("disabled", false); 


        } 


    </script> 


</body> 


  


</html>  



















                        chevron_right







                        filter_none








Output:


    

  • Before Click on the Button:
    

    • 

  • After Click on the Button:
    

    • 



Example 3: In this example, enable and disable all input controls inside a form is done sequentially.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title> 


        How to enable and disable all input 


        controls inside a form using jQuery ? 


    </title> 


      


    <script src= 


"https://code.jquery.com/jquery-1.12.4.min.js"> 


    </script> 


</head> 


  


<body style="text-align:center;"> 


  


    <h1 style = "color:green;" >  


        GeeksForGeeks  


    </h1>  


  


    <h3> 


        How to enable and disable all input  


        controls inside a form using jQuery ? 


    </h3> 


    <hr> 


      


    <form id="GFG">  


        <h3 style = "color:green;" > 


            GFG Registration Form 


        </h3> 


          


        <label><h4>Name:</h4></label> <input type="text"> 


          


        <label><h4>Gender:</h4></label> 


        <label><input type="radio" name="sex"> Male</label>      


        <label><input type="radio" name="sex"> Female</label> 


          


        <label><h4>Address:</h4></label> 


        <textarea></textarea> 


          


        <label><h4>Country:</h4></label> 


        <select> 


            <option>select</option> 


        </select> 


        <br><br> 


          


        <button type="button">Submit</button> 


        <button type="button">Reset</button> 


    </form> 


      


    <br><br> 


      


    <input onclick="enable_disable()" type="button"


                class="slide-toggle" value="Enable"


                id="myButton1"> 


    </input> 


  


    <script type="text/javascript"> 


        $(document).ready(function() { 


            $("#GFG :input").prop("disabled", true); 


            $(".slide-toggle").click(function() { 


                if (this.value=="Enable") { 


                    this.value = "Disable"; 


                    $("#GFG :input").prop("disabled", false); 


                } 


                else { 


                    this.value = "Enable"; 


                    $("#GFG :input").prop("disabled", true); 


                } 


            }); 


        }); 


    </script> 


</body> 


  


</html> 



















                        chevron_right







                        filter_none








Output:


    

  • Before Click on the Button:
    

    • 

  • After Click on the Enable Button:
    

    • 

  • After Click on the Disable Button:
    

    • 



full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
SHUBHAMSINGH10
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.