Can you disable tabs in Bootstrap?

Question

Can you disable tabs in Bootstrap 2.0 like you can disable buttons?

score 199 · Accepted Answer · edited Mar 31 '16 at 12:12

199

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

edited Mar 31 '16 at 12:12

Mosh Feu

28,354
16
88
135

answered Feb 11 '12 at 02:35

Betty

9,109
2
34
48

11

Thanks worked a treat, also added css "cursor:no-drop;" for cursor so use knows why they can't click it – arbme Feb 11 '12 at 03:11
24

cursor: not-allowed; is more appropriate in this case. Unless you are actually drag-and-dropping. – Christophe Geers Aug 30 '12 at 08:21
1

This helped me, thank you. To re-activate the tab just add the data-toggle attribute back to the tag, child of the
of interest: `$('#my-tab-li-element').children('a').attr('data-toggle', 'tab');`

Stuart Allen

May 27 '13 at 13:55

9

Or add a disabled class to the li – Pencilcheck Aug 14 '13 at 00:56

2

+ Adding a `disabled` css-class to the `li` – Jaider Jun 10 '14 at 19:55

6

You need to use both suggestions above: Add "disabled" class to

AND Remove data-toogle or href attribute from tab

– Scabbia Nov 06 '14 at 17:37

score 51 · Answer 2 · answered Dec 07 '12 at 22:10

51

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.

answered Dec 07 '12 at 22:10

Scott Stafford

43,764
28
129
177

1

this is one of the main functionalities and it boggles me it is not yet implemented – DS_web_developer Apr 29 '13 at 08:14
It is implemented in v3 – Jeroen K Dec 30 '13 at 10:56
9

Yes but links are still clickable. – svlada Jan 21 '14 at 17:16
3

Exactly, the viable solution so far is to remove the data-toggle attribute. – Cyril N. Sep 29 '14 at 12:55

score 37 · Answer 3 · answered Dec 04 '13 at 15:28

37

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;
  }
});

answered Dec 04 '13 at 15:28

totas

10,288
6
35
32

9

I think a combination of this and @hotzu's response should be the answer. You should add the `disabled` class to the `li` element and then add the javascript you specified except the condition you'd be checking against would be: `if ($(this).parent().hasClass('disabled')) {..}`. – mellis481 Jun 03 '14 at 14:04
@im1dermike I don't see why I would be doing this? – totas Jun 11 '14 at 10:20
Old 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 the `disabled` class. – Jared Mar 16 '17 at 21:46

score 27 · Answer 4 · answered Mar 17 '14 at 09:22

27

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

answered Mar 17 '14 at 09:22

Zsolt Tolvaly

3,528
4
26
25

i 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?) – Rafael Herscovici Jan 26 '15 at 19:35
In 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. – sebastian Jul 03 '16 at 10:25

score 19 · Answer 5 · edited Jun 20 '20 at 09:12

19

No Need Any Jquery, Just One Line CSS

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 10 '17 at 04:41

Rubel Hossain

2,503
2
22
23

1

I had to do this on li.disabled (not li.disabled a) – Daniel Mar 07 '19 at 06:40

score 11 · Answer 6 · answered Jan 26 '15 at 13:51

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.

score 6 · Answer 7 · answered Aug 28 '14 at 10:04

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!

good! but need e.preventDefault() before e.stopImmediatePropagation() — meuwka, Dec 05 '14 at 21:22

score 6 · Answer 8 · edited Feb 16 '21 at 08:59

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.

Georgios Syngouroglou · Answer 9 · 2017-01-11T12:02:13.023

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>

score 2 · Answer 10 · answered Mar 07 '17 at 10:55

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')

score 1 · Answer 11 · answered May 07 '16 at 17:46

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');

score 1 · Answer 12 · answered Sep 29 '19 at 13:53

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>

score 0 · Answer 13 · answered Sep 13 '14 at 12:27

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');
});

score 0 · Answer 14 · answered Nov 06 '14 at 18:57

0

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.

answered Nov 06 '14 at 18:57

mellis481

4,332
12
71
118

Now 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... – Jim Oct 02 '15 at 17:39

score 0 · Answer 15 · answered Aug 02 '16 at 05:03

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;
            }
        }
    }
}

Gaurravs · Answer 16 · 2016-08-30T10:27:49.333

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 ex page.apsx#Home
No need of adding "disabled" class to <li> AND removing href

score -1 · Answer 17 · answered Oct 30 '15 at 00:16

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);

Can you disable tabs in Bootstrap?

17 Answers17

No Need Any Jquery, Just One Line CSS

Linked