Last Updated on September 14, 2022 by Roshan Parihar
In this tutorial, learn how to remove disabled attribute from input elements using jQuery. The short answer is to use the removeAttr() function and pass disabled as its attribute.
You can also use the attr() function and prop() function of jQuery. Let’s find out with the different methods given below.
Method 1: jQuery Remove Disabled Attribute Using removeAttr() Function
If you want to remove the disabled attribute from the form element, you can use the removeAttr() function that takes a single argument as its value. Specify disabled attribute as its argument to remove the attribute. 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").removeAttr("disabled"); }); }); </script> <input type="text" placeholder="Enter your name" disabled> <button type="button">Remove Attribute</button> |
Output
The above example contains the input text element and the button element. Initially, the input element is in disabled condition and you cannot click to enter your text in the input box. When you click the button given above, the input text becomes enabled and you will be able to enter your text content.
Method 2: How to Remove Disabled Attributes Using prop() Function
To remove the disabled attribute from the input element, you can use the prop() function that takes two arguments. The first argument is the disabled attribute within double quotes (" " ). The second attribute is the false value to make it enabled.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $("input").prop("disabled",false); }); }); </script> <input type="email" placeholder="Enter your email" disabled> <button type="button">Remove Attribute</button> |
Output
You have to click the button given above to make the input element enabled. Now, you can enter your text content into the input element.
Method 3: Using attr() Function
In addition to the above examples, you can also use the attr() function to remove disabled attribute from the form element. It also takes two arguments in which the first is "disabled" and the second is false.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $("input").attr("disabled",false); }); }); </script> <input type="number" placeholder="Enter your mobile" disabled> <button type="button">Remove Attribute</button> |
Output
Initially, the above input field is in a disabled condition. When you click the button given above, you will get the input field enabled.
You May Also Like to Read
- Add Class on Hover and Remove on MouseOut with jQuery
- How to Remove Anchor tag Link from Div Using jQuery
- jQuery Remove String from String with Examples
Reference