What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)

Solution 1:

Buttons

Buttons are simple to disable as disabled is a button property which is handled by the browser:

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>

To disable these with a custom jQuery function, you'd simply make use of fn.extend():

// Disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);

// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);

JSFiddle disabled button and input demo.

Otherwise you'd make use of jQuery's prop() method:

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

Anchor Tags

It's worth noting that disabled isn't a valid property for anchor tags. For this reason, Bootstrap uses the following styling on its .btn elements:

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

Note how the [disabled] property is targeted as well as a .disabled class. The .disabled class is what is needed to make an anchor tag appear disabled.

<a href="http://example.com" class="btn">My Link</a>

Of course, this will not prevent links from functioning when clicked. The above link will take us to http://example.com. To prevent this, we can add in a simple piece of jQuery code to target anchor tags with the disabled class to call event.preventDefault():

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

We can toggle the disabled class by using toggleClass():

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Disabled with:
$('a').disable(true);

// Enabled with:
$('a').disable(false);

JSFiddle disabled link demo.

Combined

We can then extend the previous disable function made above to check the type of element we're attempting to disable using is(). This way we can toggleClass() if it isn't an input or button element, or toggle the disabled property if it is:

// Extended disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            if($this.is('input, button, textarea, select'))
              this.disabled = state;
            else
              $this.toggleClass('disabled', state);
        });
    }
});

// Disabled on all:
$('input, button, a').disable(true);

// Enabled on all:
$('input, button, a').disable(false);

Full combined JSFiddle demo.

It's worth further noting that the above function will also work on all input types.

Solution 2:

I can't think a simpler/easier way! ;-)

Using Anchor tags (Links) :

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

To enable the Anchor tag:

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

enter image description here

To disable the Anchor tag:

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

enter image description here

Solution 3:

Suppose you have text field and submit button,

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

Disabling:

To disable any button, for example, submit button you just need to add disabled attribute as,

$('input[type="submit"]').attr('disabled','disabled');

After executing above line, your submit button html tag would look like this:

<input type="submit" class="btn" value="Submit" disabled/>

Notice the 'disabled' attribute has added.

Enabling:

For enabling button, such as when you have some text in text field. You will need to remove the disable attribute to enable button as,

 if ($('#text-field').val() != '') {
     $('input[type="submit"]').removeAttr('disabled');
 }

Now the above code will remove the 'disabled' attribute.

Solution 4:

I know I'm late to the party, but to specifically answer the two questions:

"I just want to disable specific clicky-things so that:

They stop clicking
They look disabled

How hard can this be?"

They stop clicking

1. For buttons like <button> or <input type="button"> you add the attribute: disabled.

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

2. For links, ANY link... actually, any HTML element, you can use CSS3 pointer events.

.selector { pointer-events:none; }

Browser support for pointer events is awesome by today's state of the art (5/12/14). But we usually have to support legacy browsers in the IE realm, so IE10 and below DO NOT support pointer events: http://caniuse.com/pointer-events. So using one of the JavaScript solutions mentioned by others here may be the way to go for legacy browsers.

More info about pointer events:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
http://wiki.csswg.org/spec/css4-ui#pointer-events

They look disabled

Obviously this a CSS answer, so:

1. For buttons like <button> or <input type="button"> use the [attribute] selector:

button[disabled] { ... }

input[type=button][disabled] { ... }

Here's a basic demo with the stuff I mentioned here: http://jsfiddle.net/bXm5B/4/

Hope this helps.