Re-enabling a disabled button

Question

If I set a button's disabled attribute to be true, and I then want to enable it after a certain period of time using jQuery, why can I not then just set the disabled attribute to be false with the jQuery?

HTML:

<form>
    <input id="myButton" type="submit" disabled="true" value="Submit"/>
</form>

jQuery:

setTimeout(EnableSubmit, 3000);

function EnableSubmit()
{
    $("#myButton").attr("disabled", "false");
}

JSFiddle: http://jsfiddle.net/TV7t4/

Answer 1

The disabled attribute's value doesn't matter, it just needs to be set to work.

Try removing the attribute entirely like this:

$("#myButton").removeAttr("disabled");

Answer 2

I always use this, which worked for me:

$("#myButton").prop('disabled', false);

Also see this: Disable/enable an input with jQuery?

Answer 3

Because the disabled attribute is a boolean attribute. It works by its mere presence, regardless of its value. I could write disabled="I'm a broken paperclip" and it would still work.

Try:

document.getElementById('myButton').disabled = true; // disable
document.getElementById('myButton').disabled = false; // re-enable

Vanilla JS is so much simpler...

Answer 4

Use .prop() and false:

setTimeout(EnableSubmit, 3000);
function EnableSubmit() {
    $("#myButton").prop("disabled", false);
}

jsFiddle example

From the docs: The .prop() method should be used to set disabled and checked instead of the .attr() method.

Answer 5

You need to set it to the boolean value false, not the string "false", so lose the quotes.

$("#myButton").prop("disabled", false);

}

Answer 6

$("#myButton").removeAttr('disabled');