Disable bootstrap tab clicks

Question

I am using bootsrap tabs for a registration form , I changed navigation of tabs using onclick event of next and previous button . But still that tabs click works and being able to go the desired page easily Please help how can i stop tab click navigation i only want next previous button navigation Please find the html code below

 <ul class="nav nav-tabs" id="myTab">
   <li class="active">
     <a href="#home" data-toggle="tab">1.PERSONAL DETAILS</a> 
   </li>   
   <li>
     <a href="#profile" data-toggle="tab"> 2. CONTACT DETAILS</a> 
   </li>  
   <li>
     <a href="#messages" data-toggle="tab">3. EDUCATION DETAILS</a>
   </li>   
   <li>
     <a href="#course" data-toggle="tab">4. SELECT COURSE</a>
   </li>   
   <li>
     <a href="#settings" data-toggle="tab">5. PAYMENT DETAILS</a>
   </li> 
 </ul>
 <div class="tab-content">
    <div class="tab-pane active" id="home">Form elements </div>
    <div id="profile">Form elements </div>
    <div id="messages">Form elements </div>
    <div id="settings">Form elements </div>
 </div>

Possible duplicate of [Can you disable tabs in Bootstrap?](http://stackoverflow.com/questions/9237314/can-you-disable-tabs-in-bootstrap) — Gaurravs, Aug 31 '16 at 08:39

score 8 · Answer 1 · edited Mar 06 '15 at 12:52

I have tabs like this in the HTML (using Bootstrap 3.0):

<ul class="nav nav-tabs" id="createNotTab">
    <li class="active" ><a href="#home" data-toggle="tab">Step 1: Select Property</a></li>
    <li class="disabled"><a href="#createnotification" data-toggle="" >Step 2: Create Notification</a></li>
</ul>

Next/Previous buttons

<button class="btn btn-warning prevtab" type="button" onclick="return showPrev()"><span class="glyphicon glyphicon-arrow-left"></span>Previous </button>
 <button class="btn btn-info prevtab" type="button" onclick="return showNext()"><span class="glyphicon glyphicon-arrow-right"></span>Next </button>

In my JavaScript file:

 var $tabs = $('#createNotTab li');


function showPrev() {
    $tabs.filter('.active').prev('li').removeClass("disabled");
    $tabs.filter('.active').prev('li').find('a[data-toggle]').each(function () {
       $(this).attr("data-toggle", "tab");
    });

    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');

    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').each(function () {
        $(this).attr("data-toggle", "").parent('li').addClass("disabled");        
    })
}

function showNext() {
    $tabs.filter('.active').next('li').removeClass("disabled");
    $tabs.filter('.active').next('li').find('a[data-toggle]').each(function () {
        $(this).attr("data-toggle", "tab");
    });

    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');

    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').each(function () {
        $(this).attr("data-toggle", "").parent('li').addClass("disabled");;        
    })
}

If you are having multiple tabs, set class="disabled" and data-toggle="" for all the li items that you want to deactivate.

score 7 · Answer 2 · answered Sep 08 '15 at 19:32

7

I was having the same issue and this is what i used.

$("element").click(event) {
    event.stopImmediatePropagation();
}

you just intercept the click event and then kill the event. To show the tabs, I'd just use $(tab.content).fadeIn();

answered Sep 08 '15 at 19:32

mikeh

71
1
1

score 6 · Answer 3 · answered Nov 16 '13 at 14:31

6

try this for disabling a tab

$('#tab').attr('class', 'disabled');

    $('tab').click(function(event){
        if ($(this).hasClass('disabled')) {
            return false;
        }
    });

answered Nov 16 '13 at 14:31

Ihsahs

892
9
23

2

even if it disables , i am being able to navigate using tabs i want to stop navigation to next tabs through the tab click it will happen only through next button click – user2999253 Nov 16 '13 at 14:46
try @Delphian suggestion – Ihsahs Nov 16 '13 at 14:53
ya i tried that , then the next button also wont work i mean after removing data-toggle="tab" when you click the next button to go the the next tab it wont work – user2999253 Nov 16 '13 at 14:59
remove data-toggle="tab" and on click of next button show the target container and hide the other containers. On click of next, check which container to be navigated – Ihsahs Nov 16 '13 at 15:10
yes i managed to write some jquery on onclick thanks for the idea – user2999253 Nov 16 '13 at 18:51

score 1 · Answer 4 · answered May 14 '14 at 23:04

1

Super simple...

Add disabled class to tab li.

on show.bs.tab event attached to a[data-toggle='tab'] element 
check to see if its parent has the disabled class...

if so return false...

answered May 14 '14 at 23:04

dkimbell13

123
7

I like this approach, very clean. It can be included in a js file across the application so that all that needs to be done is add the disabled class to the tab. – Paul Zepernick May 18 '17 at 15:43

score 1 · Answer 5 · answered Apr 17 '15 at 13:33

1

$(document).ready(function(){
    $("#tabs > li").click(function(){
        if($(this).hasClass("disabled"))
            return false;
    });
});

It will be enough to work

answered Apr 17 '15 at 13:33

Danilo Colasso

2,360
17
11

Poorya · Answer 6 · 2020-03-25T01:47:18.547

I used

style="pointer-events: none;"

something like:

<div class="steps nav" role="tablist">
    <div href="#first" data-toggle="tab" role="tab" class="step mb-4 active" style="pointer-events: none;">
        <div class="number">1</div>
        first
    </div>
    <div href="#second" data-toggle="tab" role="tab" class="step mb-4" style="pointer-events: none;">
        <div class="number">2</div>
        second
    </div>
</div>

seems to be doing the trick. still able to perform navigation using .click() function. which is what most are looking for.

something like

$('.nav [href="' + target + '"]').click()

Happy coding!

score 0 · Answer 7 · answered Mar 19 '17 at 12:52

0

Use following code to disable the user Click on tab:

$('li:has([data-toggle="tab"])').click(function(event){return false;});

Maker sure this code will be added after your bootsrtap js

answered Mar 19 '17 at 12:52

Subhasom

51
2

score 0 · Answer 8 · answered Jul 08 '17 at 20:12

0

I, had this problem for a while.

Remove the data-toggle = ..

to do conditionnaly by javascript Give tabs, Ids in the tag document.getElementById(tabId)[0].setAttribute("data-toggle", "");

answered Jul 08 '17 at 20:12

Iexist

53
1
7

Abou-Emish · Answer 9 · 2018-01-26T19:19:06.327

I tried all suggested answers, but finally i made it work like this

if (AnyCondition) //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');
});

Even though everyone downvoted this one, it actually is the best answer. It helped me to make this: $("#id" ).css( "color", "grey" ).prop('disabled', true); — Sol, Jan 25 '18 at 18:00
@sol i don't know why the down voted it, it worked for me :) — Abou-Emish, Jan 26 '18 at 19:20

Disable bootstrap tab clicks

9 Answers9

Linked