Unable to disable a button element using JavaScript

Question

I am unable to disable a button using the getElementById() method. I am looking for inspiration as to what I am doing wrong because I use it to enable a button but I cannot seem to be able to disable it.

I have tried calling the method in different ways:

document.getElementById('wsSubmit').disabled = false;
document.getElementById("wsSubmit").disabled = false;
document.getElementById('#wsSubmit').disabled = false;
document.getElementById("#wsSubmit").disabled = false;
document.getElementById(buttons[0]).disabled = false;

Button in question:

<input class="button" type="button" id="wsSubmit" onclick="closeWindowDWSC();" value="Submit" disabled>

I want the button to become enabled.

Have you checked the button exists when the code runs? What errors are thrown? — charlietfl, Jul 29 '19 at 21:12
https://stackoverflow.com/questions/13831601/disabling-and-enabling-a-html-input-button — cWerning, Jul 29 '19 at 21:13
document.getElementById('wsSubmit').disabled = false is to enable and document.getElementById('wsSubmit').disabled = true to disable - https://codepen.io/nagasai/pen/ymMyqz — Naga Sai A, Jul 29 '19 at 21:16

jhpratt · Accepted Answer · 2019-07-29T21:34:47.513

2

You need to remove the attribute.

document.getElementById('wsSubmit').removeAttribute('disabled');

As mentioned in the comments, a duplicate Id would case this functionality to fail.

edited Jul 29 '19 at 21:34

answered Jul 29 '19 at 21:11

jhpratt

6,841
16
40
50

2

Can also target the property as OP is doing – charlietfl Jul 29 '19 at 21:13
In which case there would be some other error that wasn't mentioned. I actually didn't realize you could use the property directly, `removeAttribute` is the more common way, I'd think. – jhpratt Jul 29 '19 at 21:15
I am wondering if it is something with how I called document.getElementById(). Here is an example of how I called it 3 lines above the current call ```document.getElementById(butId).disabled = true;```. This one works perfectly but when I explicitly name the button it seems to break. – Kevin Jul 29 '19 at 21:22
@Kevin `getElementById` expects you to give the `id` value of the html element. So button name shouldn't work .. – Arup Rakshit Jul 29 '19 at 21:23
@jhpratt Yes it was! It was present in a different partial view that should not have been rendered until after that button click. Thanks for the persistence. – Kevin Jul 29 '19 at 21:27
Yeah, that'll do it! IDs should definitely be unique, or else things like that can happen. – jhpratt Jul 29 '19 at 21:30

Arup Rakshit · Answer 2 · 2019-07-29T21:27:00.073

Visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

A small demo:

<!-- Checkbox enables/disables the button -->
<label for="checkbox"><input type="checkbox" id="checkbox" label="Enable button" onclick="document.getElementById('buttRemove').disabled = ! this.checked">Enable/Disable the button</label>
<hr>
<button id="buttRemove" label="Remove All" disabled="true">Button</button>

Back to your example. The first 2 example of code which is really same, if I don't consider the '' and "".. You want it to be set as true, when want to enable them like:

document.getElementById('wsSubmit').disabled = true;
document.getElementById("wsSubmit").disabled = true;

This should work. If doesn't work, then probably your page has duplicate ID to another element which comes after this <button> element in the DOM.

Unable to disable a button element using JavaScript

2 Answers2