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

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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!

Answer 6

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...