Can you disable tabs in Bootstrap?
JavascriptCssTwitter BootstrapTwitter Bootstrap-2Javascript Problem Overview
Can you disable tabs in Bootstrap 2.0 like you can disable buttons?
Javascript Solutions
Solution 1 - Javascript
You could remove the data-toggle="tab"
attribute from the tab as it's hooked up using live/delegate events
Solution 2 - Javascript
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 - Javascript
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 - Javascript
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 - Javascript
No Need Any Jquery, Just One Line CSS
.nav-tabs li.disabled a {
pointer-events: none;
}
Solution 6 - Javascript
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.
Solution 7 - Javascript
Old question but it kind of pointed me in the right direction. The method I went for was to add the disabled class to the li and then added the following code to my Javascript file.
$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) {
e.stopImmediatePropagation();
});
This will disable any link where the li has a class of disabled. Kind of similar to totas's answer but it won't run the if every time a user clicks any tab link and it doesn't use return false.
Hopefully it'll be useful to someone!
Solution 8 - Javascript
For my use, the best solution was a mix of some of the answers here, which are :
- Adding the
disabled
class to the li I want to disable - Add this piece of JS :
$(".nav .disabled>a").on("click", function(e) {
e.preventDefault();
return false;
});
- You can even remove the data-toggle="tab" attribute if you want Bootstrap to not interfer at all with your code.
NOTE: The JS code here is important, even if you remove the data-toggle because otherwise, it will update your URL by adding the #your-id
value to it, which is not recommended because your tab is disabled, thus should not be accessed.
Solution 9 - Javascript
With only css, you can define two css classes.
<style type="text/css">
/* Over the pointer-events:none, set the cursor to not-allowed.
On this way you will have a more user friendly cursor. */
.disabledTab {
cursor: not-allowed;
}
/* Clicks are not permitted and change the opacity. */
li.disabledTab > a[data-toggle="tab"] {
pointer-events: none;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
</style>
This is an html template. The only thing needed is to set the class to your preferred list item.
<ul class="nav nav-tabs tab-header">
<li>
<a href="#tab-info" data-toggle="tab">Info</a>
</li>
<li class="disabledTab">
<a href="#tab-date" data-toggle="tab">Date</a>
</li>
<li>
<a href="#tab-photo" data-toggle="tab">Photo</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-info">Info</div>
<div class="tab-pane active" id="tab-date">Date</div>
<div class="tab-pane active" id="tab-photo">Photo</div>
</div>
Solution 10 - Javascript
Suppose, this is your TAB and you want to disable it
<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>
So you can also disable this tab by adding dynamic css
$('#groups').css('pointer-events', 'none')
Solution 11 - Javascript
In addition to James's answer:
If you need to disable the link use
$('a[data-toggle="tab"]').addClass('disabled');
If you need to prevent a disabled link from loading the tab
$('a[data-toggle="tab"]').click(function(e){
if($this.hasClass("disabled")){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}
If you need to unable the link
$('a[data-toggle="tab"]').removeClass('disabled');
Solution 12 - Javascript
You can disable a tab in bootstrap 4 by adding class disabled
to the child of nav-item as follows
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#messages7" role="tab" aria-expanded="false">
<i class="icofont icofont-ui-message"></i>Home</a>
<div class="slide"></div>
</li>
Solution 13 - Javascript
I tried all suggested answers, but finally i made it work like this
if (false) //your condition
{
$("a[data-toggle='tab'").prop('disabled', true);
$("a[data-toggle='tab'").each(function () {
$(this).prop('data-href', $(this).attr('href')); // hold you original href
$(this).attr('href', '#'); // clear href
});
$("a[data-toggle='tab'").addClass('disabled-link');
}
else
{
$("a[data-toggle='tab'").prop('disabled', false);
$("a[data-toggle='tab'").each(function () {
$(this).attr('href', $(this).prop('data-href')); // restore original href
});
$("a[data-toggle='tab'").removeClass('disabled-link');
}
// if you want to show extra messages that the tab is disabled for a reason
$("a[data-toggle='tab'").click(function(){
alert('Tab is disabled for a reason');
});
Solution 14 - Javascript
None of the answers work for me. Remove data-toggle="tab"
from the a
prevents the tab from activating, but it also adds the #tabId
hash to the URL. That is unacceptable to me. What is also unacceptable is using javascript.
What does work is added the disabled
class to the li
and removing the href
attribute of its containing a
.
Solution 15 - Javascript
my tabs were in panels, so i added a class='disabled' to the tabs anchor
in javascript i added:
$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) {
if ($(this).hasClass('disabled')){
e.preventDefault();
return false;
}
})
and for presentation in less i added:
.panel-heading{
display:table;
width:100%;
padding-bottom:10px;
ul.nav-tabs{
display:table-cell;
vertical-align:bottom;
a.disabled{
.text-muted;
cursor:default;
&:hover{
background-color:transparent;
border:none;
}
}
}
}
Solution 16 - Javascript
Most easy and clean solution to avoid this is adding onclick="return false;"
to a
tag.
<ul class="nav nav-tabs">
<li class="active">
<a href="#home" onclick="return false;">Home</a>
</li>
<li>
<a href="#ApprovalDetails" onclick="return false;">Approval Details</a>
</li>
</ul>
- Adding
"cursor:no-drop;"
just makes cursor look disabled, but is clickable, Url gets appending with href target for expage.apsx#Home
- No need of adding
"disabled"
class to<li>
AND removinghref
Solution 17 - Javascript
Here's my attempt. To disable a tab:
- Add "disabled" class to tab's LI;
- Remove 'data-toggle' attribute from LI > A;
- Suppress 'click' event on LI > A.
Code:
var toggleTabs = function(state) {
disabledTabs = ['#tab2', '#tab3'];
$.each(disabledTabs, $.proxy(function(idx, tabSelector) {
tab = $(tabSelector);
if (tab.length) {
if (state) {
// Enable tab click.
$(tab).toggleClass('disabled', false);
$('a', tab).attr('data-toggle', 'tab').off('click');
} else {
// Disable tab click.
$(tab).toggleClass('disabled', true);
$('a', tab).removeAttr('data-toggle').on('click', function(e){
e.preventDefault();
});
}
}
}, this));
};
toggleTabs.call(myTabContainer, true);