150

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.

ubuntugod
  • 592
  • 7
  • 16
Sam San
  • 6,567
  • 8
  • 33
  • 51

6 Answers6

273

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'.

David Hedlund
  • 128,221
  • 31
  • 203
  • 222
  • 1
    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 Jul 30 '12 at 11:03
  • 1
    yes, it works! thanks. by the way there is a typo-error at geElementsBy . I thought it wouldn't work :) – Sam San Jul 30 '12 at 11:18
59

Why not just remove that attribute?

  1. Vanilla JS is working in any major browser: elem.removeAttribute('disabled') Documentation
  2. jQuery: elem.removeAttr('disabled')
Adrian
  • 2,233
  • 1
  • 22
  • 33
Dragos Rusu
  • 1,508
  • 14
  • 14
16

Best answer is just removeAttribute

element.removeAttribute("disabled");
Harshit Nigam
  • 244
  • 2
  • 6
  • 1
    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. – Raffael Meier Jun 24 '20 at 10:02
4

To set the disabled to false using the name property of the input:

document.myForm.myInputName.disabled = false;
Henry Hedden
  • 41
  • 1
1

If you are using jQuery, you can remove the disabled attribute by setting it to "false":

$("#input-id").attr("disabled", false)
JoeMecPak
  • 618
  • 2
  • 14
  • 28
Silverio Dos Santos
  • 11
  • 1
  • 1
    Please, edit your answer to add some explanations. – Syscall Jan 19 '22 at 14:31
  • 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. – CascadiaJS Jan 21 '22 at 17:51
0
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.

see demo https://jsfiddle.net/eliz82/xqzccdfg/

crisc2000
  • 1,082
  • 13
  • 19
  • This two not working for me. ``method 1
    method 2 ``     – Ambal Mani Aug 02 '17 at 10:53
  • 1
    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). – crisc2000 Sep 27 '17 at 06:34