Disable boot tab clicks

Question

I use the bootsrap tabs for the registration form, I changed the tab navigation using the onclick event of the next and previous buttons. But still this tabs click on the work and can easily go to the desired page. Please help how I can stop click-through navigation. I only want the next previous navigation button. 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> 

Answer 1

try this to disable the tab

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

Answer 2

I have tabs like this in 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 have several tabs, set class="disabled" and data-toggle="" for all li elements that you want to disable.

Answer 3

I had the same problem and this is what I used.

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

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

Answer 4

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

Enough work

Answer 5

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

Answer 6

Use the following code to disconnect the user. Click the tab:

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

Make sure this code is added after loading bootsrtap js

Answer 7

I, there has been a problem for a while.

Delete data-toggle = ..

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

Answer 8

I tried all the suggested answers, but finally I made it work

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