Can you disable tabs in Bootstrap?
Solution 1
You could remove the data-toggle="tab"
attribute from the tab as it's hooked up using live/delegate events
Solution 2
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.
Solution 3
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;
}
});
Solution 4
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
Solution 5
No Need Any Jquery, Just One Line CSS
.nav-tabs li.disabled a {
pointer-events: none;
}
arbme
Updated on February 16, 2021Comments
-
arbme over 3 years
Can you disable tabs in Bootstrap 2.0 like you can disable buttons?
-
arbme over 12 yearsThanks worked a treat, also added css "cursor:no-drop;" for cursor so use knows why they can't click it
-
Christophe Geers almost 12 yearscursor: not-allowed; is more appropriate in this case. Unless you are actually drag-and-dropping.
-
DS_web_developer about 11 yearsthis is one of the main functionalities and it boggles me it is not yet implemented
-
Stuart Allen about 11 yearsThis helped me, thank you. To re-activate the tab just add the data-toggle attribute back to the <a> tag, child of the <li> of interest:
$('#my-tab-li-element').children('a').attr('data-toggle', 'tab');
-
Pencilcheck almost 11 yearsOr add a disabled class to the li
-
Jeroen K over 10 yearsIt is implemented in v3
-
svlada over 10 yearsYes but links are still clickable.
-
mellis481 about 10 yearsI think a combination of this and @hotzu's response should be the answer. You should add the
disabled
class to theli
element and then add the javascript you specified except the condition you'd be checking against would be:if ($(this).parent().hasClass('disabled')) {..}
. -
Jaider about 10 years+ Adding a
disabled
css-class to theli
-
totas about 10 years@im1dermike I don't see why I would be doing this?
-
Cyril N. almost 10 yearsExactly, the viable solution so far is to remove the data-toggle attribute.
-
Scabbia over 9 yearsYou need to use both suggestions above: Add "disabled" class to <li> AND Remove data-toogle or href attribute from tab
-
meuwka over 9 yearsgood! but need e.preventDefault() before e.stopImmediatePropagation()
-
Rafael Herscovici over 9 yearsi would strongly recommend against that. since a css only solution leaves the tabs clickable. in case there are other events listening for those clicks, they will be executed, which is not the desired result. (i guess?)
-
effe about 9 yearsI simply added this CSS and now
class="disabled"
works as expected.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
-
Jim over 8 yearsNow that I read down further, this is also basically the same exact answer as the one from @Scott Stafford, who answered it 2 years earlier...
-
sebastian almost 8 yearsIn my case, this did the trick. I built a form consisting of multiple tabs. Going to the next tab is done via a button, which triggers a click-event on the tab to go to. So disabling clicks completely is not an option for me, but removing pointer events from the tabs was just what I needed.
-
robsch over 7 yearsThe border of the currently active tab gets still removed with this solution, when I click on a disabled tab.
-
Jared over 7 yearsOld question, but it's what I found so I'm adding this. You would do that check because the
li
is what changes the visuals for the user and is consequently what should have thedisabled
class. -
Daniel over 5 yearsI had to do this on li.disabled (not li.disabled a)
-
Augus about 4 years@effe super answer. Best solutions. It disables the click and allows us to navigate through next previous buttons. Where as the above solutions disables all the options to navigate.