Last Updated on September 17, 2022 by Roshan Parihar
In this tutorial, learn how jQuery add disabled attribute to the input element. The short answer is to use the attr() and pass disabled as its argument.
Making the input element disabled does not allow users to click and enter any data into the input box. Let’s find out with the different examples given below to add disabled attribute using jQuery.
Method 1: jQuery Add Disabled Attribute Using attr() Function
This method uses the attr() with two arguments required to add the disabled attribute to the input element. Pass "disabled" as the value of both the first and the second arguments as given below.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $("input").attr("disabled","disabled"); }); }); </script> <input type="text" placeholder="Enter your name"> <button type="button">Add Disabled Attribute</button> |
Output
The above example contains the input element and the button element. Initially, the input element is enabled to fill the data by the users. When you click the button given above, it makes the element disabled and does not allow users to enter any data on it.
Method 2: Using prop() Function of jQuery
In addition to the above example, you can also use the prop() function for making the input field disabled. The function takes the same two arguments as the value "disabled" that you have used in the above example. See the example given below to learn the method.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $("input").prop("disabled","disabled"); }); }); </script> <input type="email" placeholder="Enter your email"> <button type="button">Add Disabled Attribute</button> |
Output
You can enter your content in the input box given above. But, when you click the button given above, you will not be able to enter any data in the input box. With the click of the button, jQuery adds a disabled attribute to make it disabled.
You May Also Like to Read
- jQuery Remove Disabled Attribute with Examples
- How to Disable All Form Elements Using jQuery
- How jQuery Removes Style Attribute with Examples
Reference