javascript remove "disabled" attribute from html input
JavascriptInputAttributesJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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'.
Solution 2 - Javascript
Why not just remove that attribute?
- vanilla JS:
elem.removeAttribute('disabled') - jQuery:
elem.removeAttr('disabled')
Solution 3 - Javascript
Best answer is just removeAttribute
element.removeAttribute("disabled");
Solution 4 - Javascript
To set the disabled to false using the name property of the input:
document.myForm.myInputName.disabled = false;
Solution 5 - Javascript
$("#input-id").attr("disabled", false)
Solution 6 - Javascript
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.