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.

What do you mean enable it back? Once you disable it you can't re-enable it from the same method `Me()` I hope you know (because that's disabled) — cjds, Dec 12 '12 at 02:00
I what I'm trying to do is to disable and enable the button when certain events happen. — k.ken, Dec 12 '12 at 02:17
Does this answer your question? [How to disable HTML button using JavaScript?](/q/3014649/90527) — outis, Oct 11 '22 at 08:12

palaѕн · Accepted Answer · 2016-08-04T15:29:45.447

680

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.

edited Aug 04 '16 at 15:29

answered Dec 12 '12 at 02:16

palaѕн

72,112
17
116
136

Do I need the attributes there for this to work? like disables="disable" – k.ken Dec 12 '12 at 02:21
No, inside `$(document).ready` you can call `$('#Button').attr('disabled','disabled');`. This will disable the button on page load. And when certain events happen, you can call `$('#Button').removeAttr('disabled');` to enable it again... – palaѕн Dec 12 '12 at 02:27
how to add gray style if disabled? – Lei Yang Sep 17 '19 at 09:55
1

@LeiYang you can add some css like [this](https://stackoverflow.com/a/14750390/1823841) – palaѕн Sep 19 '19 at 04:15
Just notice that true and false are boolean, not strings, as palash correctly wrote – marcolav Dec 10 '19 at 18:41

Ian · Answer 2 · 2012-12-12T03:30:03.047

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.

what about if I want the button to be enabled initially then disabled later; I also tried enable="true". Is the enable the proper keyword?? — k.ken, Dec 12 '12 at 02:11
@k.ken No, the keyword is "disabled". If you want the button enabled initially, don't put the attribute `disabled` in at all. Just use ``. And when changing the status, use `.prop("disabled", true);` (or `false`) — Ian, Dec 12 '12 at 03:31

score 23 · Answer 3 · edited Jun 07 '22 at 02:48

23

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.

edited Jun 07 '22 at 02:48

Omar Trkzi

130
1
2
13

answered Apr 17 '15 at 21:42

Jon

3,212
32
35

score 5 · Answer 4 · answered Dec 12 '12 at 01:59

5

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.

answered Dec 12 '12 at 01:59

I wrestled a bear once.

22,983
19
69
116

score 5 · Answer 5 · answered Aug 25 '21 at 05:58

5

With jQuery you can do in a single line

//Enable
$('#Button').prop('disabled', false)

//Disable
$('#Button').prop('disabled', true)

answered Aug 25 '21 at 05:58

Kh An

481
6
13

This has been mentioned in [Accepted Answer](https://stackoverflow.com/a/13831737/6670491). – HardcoreGamer Aug 25 '21 at 06:20

Hamid N K · Answer 6 · 2017-09-21T09:05:20.783

3

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

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

edited Sep 21 '17 at 09:05

answered May 22 '17 at 08:32

Hamid N K

87
2
7

score 3 · Answer 7 · answered Jun 26 '20 at 10:23

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.

score 2 · Answer 8 · edited Apr 22 '19 at 13:57

2

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>

edited Apr 22 '19 at 13:57

marc_s

732,580
175
1,330
1,459

answered Apr 19 '19 at 10:35

Kamil Kiełczewski

85,173
29
368
345

Being doubtful, I was surprised that this actually works in Chrome, Edge, FF and Brave just tested. Apparently it's not a recommended practice (see: https://stackoverflow.com/a/3434388/1236837) so I'm not likely to use it but an interesting find. – KellyCode Jul 06 '20 at 14:40
@KellyCode I agree with you that OP approach where he use elements ID's is not good in general (maybe acceptable for vey small projects or snippets for readable code shortening) – Kamil Kiełczewski Jul 06 '20 at 15:09

score 2 · Answer 9 · answered Sep 14 '19 at 05:42

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

StefanBob · Answer 10 · 2020-09-23T16:23:08.960

2

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');

edited Sep 23 '20 at 16:23

answered Sep 18 '20 at 14:49

StefanBob

4,857
2
32
38

score -1 · Answer 11 · answered Aug 02 '17 at 10:23

-1

This will surely work .

To Disable a button

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

To Enable a button

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

answered Aug 02 '17 at 10:23

Shalika

1,457
2
19
38

score -7 · Answer 12 · edited Mar 31 '18 at 15:03

-7

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;
}
?>

edited Mar 31 '18 at 15:03

rollstuhlfahrer

3,988
9
25
38

answered Mar 31 '18 at 14:39

My Gull Wheels On

9
1

Disabling and enabling a html input button

12 Answers12

Using Javascript

Using jQuery

Linked

Related