Best way to disable button in Twitter's Bootstrap

Question

I am confused when it comes to disabling a <button>, <input> or an <a> element with classes: .btn or .btn-primary, with JavaScript/jQuery.

I have used a following snippet to do that:

$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);

So, if I just provide the $('button').addClass('btn-disabled'); to my element, it will appear as disabled, visually, but the functionality will remain the same and it will be clickable nontheless, so that it the reason why I added the attr and prop settings to the element.

Has anyone expirenced this same issue out there? Is this the right way of doing this - while using Twitter's Bootstrap?

Could check for hasclass on any attached events, but with an href I'm not sure — Zach Leighton, Jun 26 '13 at 18:24
@ZachLeighton - when it comes to "a", you have to provide an event handler for click action — , Jun 26 '13 at 18:26
I've found that you can in fact disable a link if you bind to a click event on it and call event.preventDefault(). But I wouldn't be surprised if that doesn't work in all browsers. — Mike Turley, Aug 27 '13 at 18:00
This was not a duplicate. The duplicate referenced does not cover the case for an "a" href element with classes: "btn" or "btn btn-primary" as stated in the question. — snowleopard, Feb 10 '15 at 23:00

score 339 · Accepted Answer · answered Jun 26 '13 at 18:29

339

You just need the $('button').prop('disabled', true); part, the button will automatically take the disabled class.

answered Jun 26 '13 at 18:29

Samuel R

4,235
1
13
18

29

Does not work for anchors, see my answer – Jeroen K Aug 20 '13 at 13:02
6

To also stop the click event firing, add a class with `pointer-events: none` as described in http://stackoverflow.com/a/19477318/45525 – Synesso Oct 23 '13 at 07:50
14

Add this style to your css `a[disabled] { pointer-events: none; }` – Ferran Salguero Nov 13 '13 at 19:07
4

I have just tried this with Bootstrap 3 and `$('.button').prop('disabled', true);` stops click event propagation, i.e. Bootstrap takes care of that for you. – Dr. Jan-Philip Gehrcke Sep 25 '14 at 15:06
Does not work for ` – user9645 Mar 22 '17 at 12:41
1

This does not work in my case. – Player1 Apr 25 '17 at 19:56
Also don't forget to add the aria-disabled='true' attribute, as per recommendation. – shadowf Dec 06 '17 at 13:37

score 124 · Answer 2 · edited Mar 06 '18 at 09:19

124

For input and button:

$('button').prop('disabled', true);

For anchor:

$('a').attr('disabled', true);

Checked in firefox, chrome.

See http://jsfiddle.net/czL54/2/

edited Mar 06 '18 at 09:19

ndnenkov

35,425
9
72
104

answered Aug 20 '13 at 13:03

Jeroen K

10,258
5
41
40

1

When you add a click handler to disabled anchor link, it should not work. But in your provided example, click handler is also fired. http://jsfiddle.net/76wmpohs/ – ahgindia May 19 '15 at 06:21
1

This seems to be sufficient for Bootstrap 3. It appears bootstrap is doing something on setting a btn to be visually disabled that also is preventing the click event from firing. In pure jQuery and HTML without Bootstrap 3, such as some of the fiddle examples, it appears to be a more complicated story. But this question was in context of Bootstrap. – Greg Oct 28 '15 at 20:54

score 90 · Answer 3 · edited May 23 '17 at 11:55

90

Building off jeroenk's answer, here's the rundown:

$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually + functionally

$('input[type=button]').addClass('disabled'); // Disables visually
$('input[type=button]').prop('disabled', true); // Disables visually + functionally

$('a').addClass('disabled'); // Disables visually
$('a').prop('disabled', true); // Does nothing
$('a').attr('disabled', 'disabled'); // Disables visually

See fiddle

edited May 23 '17 at 11:55

Community

1
1

answered Sep 03 '13 at 12:52

Yarin

173,523
149
402
512

nice comprehensible example! $('#button-2').attr('disabled', 'disabled') Worked for both buttons as well as links. – msanjay Feb 11 '14 at 14:54
5

@msanjay: No - the fiddle uses Bootstrap 2 and *visually* disables links/anchors, but doesn't *functionally* disable them, like the comment says. If you change it to BS3 it also functionally disables them. – EML Mar 02 '15 at 17:50
EML makes an important point. That in Boot Strap 3, setting the disabled attribute is suffiicent, and Bootrap 3 will handle the rest for you. But in jQuery and HTML (without Bootstrap 3), then such is not sufficient. – Greg Oct 28 '15 at 20:56

1234567 · Answer 4 · 2013-06-26T18:34:55.443

38

The easiest way to do this, is to use the disabled attribute, as you had done in your original question:

<button class="btn btn-disabled" disabled>Content of Button</button>

As of now, Twitter Bootstrap doesn't have a method to disable a button's functionality without using the disabled attribute.

Nonetheless, this would be an excellent feature for them to implement into their javascript library.

edited Jun 26 '13 at 18:34

answered Jun 26 '13 at 18:29

1234567

946
6
22

which is what the OP's snippet is doing – Eonasdan Jun 26 '13 at 18:31
@Eonasdan Correct, as that was the best way to achieve his desired result. I was simply restating what he had done was correct. – 1234567 Jun 26 '13 at 18:34
1

(Sorry if you see a downvote notification, I clicked on the wrong thing) – Steve McGill May 09 '14 at 14:06

score 31 · Answer 5 · edited Sep 26 '17 at 08:46

31

<div class="bs-example">
      <button class="btn btn-success btn-lg" type="button">Active</button>
      <button class="btn btn-success disabled" type="button">Disabled</button>
</div>

edited Sep 26 '17 at 08:46

Martijn Pieters

1,048,767
296
4,058
3,343

answered Oct 24 '13 at 03:57

Vicky

9,515
16
71
88

4

Real solution for the question. No JQuery needed. – Web_Developer Jan 15 '15 at 09:11
This is actually the correct solution for bootstrap buttons. – Andre Lombaard May 09 '16 at 12:42
2

doesnt work for chrome – Leandro Bardelli Nov 17 '16 at 23:45
Works in Chrome, and is the recommended method to set a button non-clickable when using Bootstrap. – StackOverflowUser Mar 08 '17 at 04:59
6

This doesn't prevent click events from firing. – Nathan Arthur Jun 15 '17 at 19:43
2

Set disabled="disabled" to prevent click events from firing. – MetalMikester Nov 07 '19 at 19:54

score -1 · Answer 6 · answered Aug 19 '13 at 11:05

-1

What ever attribute is added to the button/anchor/link to disable it, bootstrap is just adding style to it and user will still be able to click it while there is still onclick event. So my simple solution is to check if it is disabled and remove/add onclick event:

if (!('#button').hasAttr('disabled'))
 $('#button').attr('onclick', 'someFunction();');
else
 $('#button').removeattr('onclick');

answered Aug 19 '13 at 11:05

Schone

33
2

You probably meant `removeAttr` instead of `removeattr`. – Arto Bendiken Jul 02 '14 at 04:39
1

Yes, .removeAttr() is the method name [link](http://api.jquery.com/removeattr/) – Schone Dec 04 '14 at 16:48
1

That probably will not remove an onclick event, attached with on() calls. – Vladislav Rastrusny Feb 18 '15 at 15:14

Best way to disable button in Twitter's Bootstrap

6 Answers6

Linked