Disabling and enabling a html input button

Question

So I have a button like this:

<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>

How can I disable and enable it when I want? I have tried disabled="disable" but enabling it back is a problem. I tried setting it back to false but that didn't enable it.

Answer 1

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.

Answer 2

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.

Answer 3

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

Enable a button

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

Disable a button

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

No external libraries necessary.

Answer 4

the disable attribute only has one parameter. if you want to reenable it you have to remove the whole thing, not just change the value.

Answer 5

$(".btncancel").button({ disabled: true });

Here 'btncancel' is the class name of the button.

Answer 6

Without jQuery disable input will be simpler

Button.disabled=1;

function dis() {
  Button.disabled= !Button.disabled;
}

<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>

<button onclick="dis()">Toggle disable</button>

Answer 7

 <!--Button Disable Script-->
    <script type="text/javascript">
        function DisableButton() {
            document.getElementById("<%=btnSave.ClientID %>").disabled = true;
        }
        window.onbeforeunload = DisableButton;
    </script>
    <!--Button Disable Script-->

Answer 8

While not directly related to the question, if you hop onto this question looking to disable something other than the typical input elements button, input, textarea, the syntax won't work.

To disable a div or a span, use setAttribute

document.querySelector('#somedivorspan').setAttribute('disabled', true);

P.S: Gotcha, only call this if you intend to disable. A bug in chrome Version 83 causes this to always disable even when the second parameter is false.

Answer 9

Disabling/enabling an html input button with JavaScript:

(And React with refs. Replace "elementRef.current" with element selection if not using React)

 elementRef.current.setAttribute('disabled', 'disabled');

Enable:

 elementRef.current.removeAttribute('disabled');

Answer 10

This will surely work .

To Disable a button

$('#btn_id').button('disable');

To Enable a button

$('#btn_id').button('enable');

Answer 11

Stick to php...

Why not only allow the button to appear once an above criteria is met.

<?
if (whatever == something) {
    $display = '<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>';
    return $display;
}
?>