Making a Twitter Bootstrap button (link) disabled

Question

What's the real and working way to make a twitter bootstrap button (which is a LINK) disabled? They mostly suggest that it is:

$("#my_btn").prop("disabled", true); //1
//or
$("#my_btn").attr("disabled", true); //2

But this does NOT work. What does work?

doctororange · Accepted Answer · 2014-06-23T08:21:41.053

3

A link doesn't actually have a disabled attribute.

Instead, you'll need to add the .disabled css class.

$("#my_btn").addClass("disabled");

http://getbootstrap.com/css/#buttons-disabled (The section on Anchor element)

As per the discussion below, you should note that this isn't a sure-fire way of actually disabling the link in all browsers. It only uses CSS's pointer-events: none, which isn't as robust as the disabled attribute on a <button> element.

edited Jun 23 '14 at 08:21

answered Jun 23 '14 at 08:15

doctororange

10,902
11
40
57

and yet you'll be able to click it. that's not disabling. – アレックス Jun 23 '14 at 08:15
1

look here on how to disable a link http://stackoverflow.com/questions/1164635/how-to-enable-or-disable-an-anchor-using-jquery – obivandamme Jun 23 '14 at 08:16
Actually, the bootstrap `disabled` class adds `pointer-events: none;`, which will stop the link from being clicked. – doctororange Jun 23 '14 at 08:18
1

There is no _cross-browser_ built-in Bootstrap way of disabling a link. (http://caniuse.com/pointer-events) – Sergiu Paraschiv Jun 23 '14 at 08:18
To extend this, you could leverage the `disabled` class you added: `$('a.disabled').on('click', function(e){ e.preventDefault(); e.stopPropagation(); });` – Tieson T. Jun 23 '14 at 08:41

score 1 · Answer 2 · edited May 23 '17 at 12:10

What version of jQuery you using? If you need disable a link, you can add a CSS class .disabled to that link with this jQuery command:

$("#my_btn").addClass("disabled");

This code below is working for INPUT only

jQuery 1.6+

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 and below

$("input").attr('disabled','disabled');
$("input").removeAttr('disabled');

In any version of jQuery

// assuming an event handler thus 'this'
this.disabled = true;

You can check this thread: Disable/enable an input with jQuery? and here you will find your answer I hope :)

score 0 · Answer 3 · answered Jun 23 '14 at 08:16

0

It's quite simple!

just add the disabled class. Disabled:

<button class="btn btn-default disabled">Text</button>

Non disabled:

  <button class="btn btn-default">Text</button>

answered Jun 23 '14 at 08:16

Despertaweb

1,253
15
27

Making a Twitter Bootstrap button (link) disabled

3 Answers3