Last Updated on August 10, 2022 by Roshan Parihar
In this tutorial, learn how to disable all form elements using jQuery. The short answer is to use jQuery prop() function to disable form fields. The user cannot be able to click the form elements after you disable them.
First of all, you can use jQuery to enable or disable form elements easily. While developing forms, many times maybe you come up with a problem to stop user input. Therefore, After fulfilling of certain requirements, you may allow users to enter input data.
So, let’s find out by disabling your form fields with the example given below.
How to Disable All Form Elements Using jQuery
To disable the form elements and disallow the user’s entry, you have to use the prop() function that takes two arguments. The first argument is the attribute disabled to add the form elements. The second argument is true to make all the input become disabled.
See the example given below to learn the method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> $(document).ready(function(){ $('#myForm :input').prop("disabled",true); }); </script> <div style="width:300px;"> <form id="myForm"> <label>Name</label> <input type="text" class="form-control" name="Name"/> <label>Email</label> <input type="text" class="form-control" name="Email"/> <label>Message</label> <input type="text" class="form-control" name="Message"/> <input type="button" class="btn btn-primary" value="Submit" name="submit"/> </form> </div> |
Output
Finally, take your mouse to any input fields including the button element. When you take your mouse and try to click them, all the inputs are in a disabled condition. Due to this, you are not allowed to click any input field and enter any data.
Also, take your mouse to each and every form element. This is the simple method to disable every form element using jQuery. Stop allowing users to input any values in the form.
You May Also Like to Read
- How to Show Hide Form on Button Click Using jQuery
- Submit Form Using jQuery Post Data Without Page Refresh
- Show Different HTML Forms On Radio Button Selection Using jQuery
I hope you like this tutorial on disabling the form field in jQuery.