Can you disable tabs in Bootstrap?

Question

You could remove the data-toggle="tab" attribute from the tab as it's hooked up using live/delegate events

As of 2.1, from bootstrap documentation at http://twitter.github.com/bootstrap/components.html#navs, you can.

Disabled state

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless you remove the href attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.

See https://github.com/twitter/bootstrap/issues/2764 for the feature add discussion.

I added the following Javascript to prevent clicks on disabled links:

$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
  if ($(this).hasClass("disabled")) {
    e.preventDefault();
    return false;
  }
});

i think the best solution is disabling with css. You define a new class and you turn off the mouse events on it:

.disabledTab{
    pointer-events: none;
}

And then you assign this class to the desired li element:

<li class="disabled disabledTab"><a href="#"> .... </a></li>

You can add/remove the class with jQuery also. For example, to disable all tabs:

$("ul.nav li").removeClass('active').addClass('disabledTab');

Here is an example: jsFiddle

No Need Any Jquery, Just One Line CSS

.nav-tabs li.disabled a {
    pointer-events: none;
}

Also, I'm using following solution:

$('a[data-toggle="tab"]').on('click', function(){
  if ($(this).parent('li').hasClass('disabled')) {
    return false;
  };
});

Now you just adding class 'disabled' to the parent li and tab doesn't work and become gray.