How can I remove the "disabled" attribute from an HTML input using javascript?
<input id="edit" disabled>
at onClick I want my input tag to not consist of "disabled" attribute.
Add a comment
|
6 Answers
Set the element's disabled property to false:
document.getElementById('my-input-id').disabled = false;
If you're using jQuery, the equivalent would be:
$('#my-input-id').prop('disabled', false);
For several input fields, you may access them by class instead:
var inputs = document.getElementsByClassName('my-input-class');
for(var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false;
}
Where document could be replaced with a form, for instance, to find only the elements inside that form. You could also use getElementsByTagName('input') to get all input elements. In your for iteration, you'd then have to check that inputs[i].type == 'text'.
3 Comments
Sam San
yes it works, but I had a lot of input need to do the same thing. Is there any shortcut for this? is this posible ('id1', 'id2', 'id3') ?
Sam San
yes, it works! thanks. by the way there is a typo-error at geElementsBy . I thought it wouldn't work :)
rü-
This doesn't work in Safari (at least in the current 17.2). I'll have to use the other answer using
.removeAttribute('disabled'), which seems to be more up to the standard.Why not just remove that attribute?
- Vanilla JS is working in any major browser:
elem.removeAttribute('disabled')Documentation - jQuery:
elem.removeAttr('disabled')
3 Comments
aftamat4ik
jQuery("#success").removeAttr("disabled"); - this works for me, thanks!
MarCrazyness
vanilla js, removeAttribute isn't supported in IE.
Artur
@MarCrazyness
removeAttribute seems to be supported in IE11. It's marked as unknown on can I use, so I just opened IE and checked if it works. It does.Best answer is just removeAttribute
element.removeAttribute("disabled");
1 Comment
Raffael Meier
in firefox, as nowadys (2020), the disabled attribute is active althoug it is set to false. firefox is just looking for the attribute itself. so best solution is to add or remove it for firefox, and this of course works for all major browsers.
To set the disabled to false using the name property of the input:
document.myForm.myInputName.disabled = false;
Comments
method 1 <input type="text" onclick="this.disabled=false;" disabled>
<hr>
method 2 <input type="text" onclick="this.removeAttribute('disabled');" disabled>
<hr>
method 3 <input type="text" onclick="this.removeAttribute('readonly');" readonly>
code of the previous answers don't seem to work in inline mode, but there is a workaround: method 3.
2 Comments
Ambal Mani
This two not working for me.
method 1 <input type="text" onclick="this.disabled=false;" disabled> <hr> method 2 <input type="text" onclick="this.removeAttribute('disabled');" disabled>
crisc2000
You downvoted this just because you don't properly know how to read an answer? Method 1 is from the David Hedlund response, method 2 is from the Dragos Rusu response. Once an element is disabled, "onclick" on that specific element will not work anymore in inline mode (I didn't tested external js mode). The only way is to simulate "disabled" is a little workaround using readonly attribute and some css. OR make an external "onclick" element like a button that will enable input using method 1 and 2 (that will work of course).
If you are using jQuery, you can remove the disabled attribute by setting it to "false":
$("#input-id").attr("disabled", false)
2 Comments
Syscall
Please, edit your answer to add some explanations.
CascadiaJS
While this code may answer the question, it would be better to explain how it solves the problem without introducing others and why to use it. Code-only answers are not useful in the long run.