Last Updated on August 10, 2022 by Roshan Parihar
In this tutorial, learn how to disable all input fields or specified input using jQuery. The short answer is to use the prop() function for disabling the inputs of forms.
You can also use the attr() function of jQuery to disable inputs. Let’s find out how you can perform this task with the different methods given below.
Method 1: Disable All Input Fields Using jQuery prop()
To disable all input fields in jQuery, you have to use the prop() function. Pass two arguments to this function in which the first is disabled and the second is true. This adds a disabled attribute to the input fields to make them disabled.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> $(document).ready(function(){ $('form :input').prop("disabled",true); }); </script> <div style="width:300px;"> <form> <label>Name</label> <input type="text" name="Name"/> <label>Email</label> <input type="text" name="Email"/> <label>Message</label> <input type="text" name="Message"/> <input type="button" value="Submit" name="submit"/> </form> </div> |
Output
The above example shows that all the input fields are in a disabled state. You can take your mouse to the input fields to check whether it allows you to enter data or not. It will not allow entering any data into the input fields as they all are disabled.
Method 2: Using attr() Function For Disabling All Inputs Using jQuery
In addition to the above example, you can also use the attr() for disabling all inputs using jQuery. The function takes two arguments with both having value 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(){ $('form :input').attr("disabled","disabled"); }); </script> <div style="width:300px;"> <form> <label>Name</label> <input type="text" name="Name"/> <label>Email</label> <input type="text" name="Email"/> <label>Message</label> <input type="text" name="Message"/> <input type="button" value="Submit" name="submit"/> </form> </div> |
Output
When you take your mouse to the above inputs, they all show that in a disabled condition. You will not be able to enter any input to them.
How to Disable Specified Input Field Using jQuery
If you want to disable only the specified input field, you have to first assign a class to select the input element using jQuery selectors. After that, use the prop() function with two arguments in which the first is disabled and the second is true.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> $(document).ready(function(){ $("form input.emaildisable']").prop("disabled",true); }); </script> <div style="width:300px;"> <form> <label>Name</label> <input type="text" class="form-control" name="Name"/> <label>Email</label> <input type="text" class="form-control emaildisable" 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
The above example contains three input fields including the submit button. Only the email input field is in a disabled condition. You can use this method to disable other inputs using jQuery.
You May Also Like to Read