Give an HTML document containing a form element. The form element contains input elements, option elements, and button elements. The task is to enable or disable all input controls inside a form using jQuery. It can 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.Â
html
<!DOCTYPE html><html>Â
<head>    <title>        How to enable and disable all input        controls inside a form using jQuery?    </title>         <script src=    </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> |
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.Â
html
<!DOCTYPE html><html>Â
<head>    <title>        How to enable/disable all input controls        inside a form using jQuery?    </title>Â
    <script src=    </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> |
Output:
Before Click on the Button:Â
After Click on the Button:Â
Example 3: In this example, enabling and disabling all input controls inside a form is done sequentially.Â
html
<!DOCTYPE html><html>Â
<head>    <title>        How to enable and disable all input        controls inside a form using jQuery ?    </title>         <script src=    </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> |
Output:
Before Click on the Button:Â
After Click on the Enable Button:Â
After Click on the Disable Button:Â
