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

javascript

jquery-spells

responsive-design

best-practices

byAlex Kataev·Dec 11, 2024

// Disable — commands to shields up!
$('button, .btn, a').prop('disabled', true).addClass('disabled');

// Enable — Make it so! Engage!
$('button, .btn, a').prop('disabled', false).removeClass('disabled');

These magic words toggle states for buttons and links as effortlessly as changing TV channels.

Build your own jQuery spells

Maybe you need to disable/enable elven elements more often. Here's a custom jQuery spell for that:

$.fn.extend({
  toggleDisable: function(state) {
    return this.each(function() {
      $(this).prop('disabled', state);
      if (this.tagName === 'A') {
        $(this).toggleClass('disabled', state);
      }
    });
  }
});

// Cast the spell
$('button, .btn, a').toggleDisable(true); // Fire 'Expelliarmus'!
$('button, .btn, a').toggleDisable(false); // Cast 'Accio'!

Leverage the magic of jQuery's extendability for more fantastic reusable controls.

Dressing up your elements

Give your buttons and links a makeover with CSS selectors [disabled] or .disabled:

[disabled], .disabled {
    opacity: 0.5;
    cursor: not-allowed; // No trespassing, folks.
}

Pointer-events: none can protect a princess (element) from unwanted Prince Charming's (user clicks), but beware of the dragon (cross-browser compatibility):

.disabled {
    pointer-events: none; // Here be dragons!
}

Make your buttons and links guardians to your kingdom:

State	Guardian	Action
Enabled	Friendly knight 🛡	Pass safely
Disabled	Angry dragon 🐉	Blocked path

Commanding your guardians with jQuery + Bootstrap:

//Dragon alert! 🚨
$(".btn").prop("disabled", true); // Summon the dragon! 🐉
$("a").addClass("disabled"); // Drop the drawbridge! 🌉 

//All clear! ✅
$(".btn").prop("disabled", false); // Send dragon away
$("a").removeClass("disabled"); // Raise the drawbridge! 🏰

Maintain your kingdom's sovereignty from the treacherous hoards (read: website users)!

Mastering interactive guardians

When your kingdom has more knights and dragons than you can count (cough multiple elements cough), ensure harmony:

$('button').each(function() {
  if ($(this).is(':disabled')) { // Dragon on duty?
    $(this).prop('disabled', false); // Bring in the knight!
  } else {
    $(this).prop('disabled', true); // Need a dragon here!
  }
});

This way your kingdom stays secure and accessible to your allies.

Avoid excluding magical creatures (a.k.a Accessibility)

Inclusion is key! Ensure to add the disabled attribute to help magical creatures (users of assistive technologies):

$('input[type="submit"]').prop('disabled', !isValidForm()); // Open to allies, closed to enemies.

This spell ensures only valid forms can summon the submit button.

Commanding interdimensional portals (Bootstrap modals)

With Bootstrap's modal plugin, control state of buttons within portals (modals) with magic data-* spells:

$('#myModal').on('shown.bs.modal', function () {
  $(this).find('.btn-confirm').prop('disabled', true); // Cast 'Alohomora' to unlock
  // The rest of the magic...
});