Disabling and enabling a html input button

Since you are disabling it in the first place, the way to enable it is to set its disabled property as false.

To change its disabled property in Javascript, you use this:

var btn = document.getElementById("Button");
btn.disabled = false;

And obviously to disable it again, you'd use true instead.

Since you also tagged the question with jQuery, you could use the .prop method. Something like:

var btn = $("#Button");
btn.prop("disabled", true);   // Or `false`

This is in the newer versions of jQuery. The older way to do this is to add or remove an attribute like so:

var btn = $("#Button");
btn.attr("disabled", "disabled");
// or
btn.removeAttr("disabled");

The mere presence of the disabled property disables the element, so you cannot set its value as "false". Even the following should disable the element

<input type="button" value="Submit" disabled="" />

You need to either remove the attribute completely or set its property.


Using Javascript

  • Disabling a html button

    document.getElementById("Button").disabled = true;
    
  • Enabling a html button

    document.getElementById("Button").disabled = false;
    
  • Demo Here


Using jQuery

All versions of jQuery prior to 1.6

  • Disabling a html button

    $('#Button').attr('disabled','disabled');
    
  • Enabling a html button

    $('#Button').removeAttr('disabled');
    
  • Demo Here

All versions of jQuery after 1.6

  • Disabling a html button

    $('#Button').prop('disabled', true);
    
  • Enabling a html button

    $('#Button').prop('disabled', false);
    
  • Demo Here

P.S. Updated the code based on jquery 1.6.1 changes. As a suggestion, always use the latest jquery files and the prop() method.


You can do this fairly easily with just Vanilla JavaScript, no libraries required.

Enable a button

document.getElementById("Button").disabled=false;

Disable a button

 document.getElementById("Button").disabled=true;

No external libraries necessary.