Can You Disable Tabs in Bootstrap

Can you disable tabs in Bootstrap?

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

How to disable bootstrap tabs

You can use pointer-events:none on all but the first li

.nav.nav-tabs li:not(:first-of-type) a {
  pointer-events:none;
}

Disabling Tabs in Bootstrap

Here's the solution. It seems bootstrap doesn't like you changing the active tags manually.

$(document).ready(function(){
    $('#store-tab').attr('class', 'disabled');
    $('#bank-tab').attr('class', 'disabled active');

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

    $('.selectKid').click(function(event){
        $('.checkbox').removeAttr("disabled");
        $('#bank-tab').attr('class', 'active');
        $('#store-tab').attr('class', '');
    });
});

Bootstrap 4 – Disable tabs function on mobile devices

Use the d-none d-sm-flex classes on the below div and add the style shown below.

  <ul class="nav nav-justified nav-tabs d-none d-sm-flex" id="myTab" role="tablist">

@media screen and (max-width: 575px) {  .tab-content>.tab-pane {    display: block !important;    opacity: 1 !important;  }}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><div class="container">
  <ul class="nav nav-justified nav-tabs d-none d-sm-flex" id="myTab" role="tablist">    <li class="nav-item">      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Tab 1</a>    </li>    <li class="nav-item">      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Tab 2</a>    </li>    <li class="nav-item">      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Tab 3</a>    </li>  </ul>
  <div class="tab-content" id="myTabContent">    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Tab content 1</div>    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Tab content 2</div>    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Tab content 3</div>  </div>
</div>

Disabling bootstrap open tab from link after tab changing

This is what used to solve it after days of trying.

    //Updated html
    <div class="wizard">
    <div class="wizard-inner">
    <div class="connecting-line"></div>
    <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active" id="step_1"> 
    <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
    <span class="round-tab">
    <div class="numberCircle">1</div>
    </span>
    </a>
    </li>

    <li role="presentation" class="disabled" id="step_2">
    <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
    <span class="round-tab">
    <div class="numberCircle">2</div>
    </span>
    </a>
    </li>
    <li role="presentation" class="disabled" id="step_3">
    <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
    <span class="round-tab">
    <div class="numberCircle">3</div>
    </span>
    </a>
    </li>

    <li role="presentation" class="disabled" id="step_4">
    <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
    <span class="round-tab">
    <div class="numberCircle">4</div>
    </span>
    </a>
    </li>
    </ul>
    </div>
    <div class="tab-pane active" role="tabpanel" id="step1"><li><button type="button" class="btn btn-default prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn-info-full next-step" style="margin-top:-30px;">Save and continue</button></li></div>

    <div class="tab-pane" role="tabpanel" id="step2"><li><button type="button" class="btn btn-default prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn-info-full next-step" style="margin-top:-30px;">Save and Continue</button></li></div>

    <div class="tab-pane" role="tabpanel" id="step3"><li><button type="button" class="prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn btn-success btn-info-full next-step" style="margin-top:-30px;">Save and Finish</button></li></div>
    </div>

    </div>
    </div>
    </div>

       //updated javascript
      <script>
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();

//Wizard

var activeTab = null;

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

activeTab = e.target;

var $target = $(e.target);

if ($target.parent().hasClass('disabled')) {
return false;
}

if($target == "#step1"){
$("#step_2").attr("disabled","disabled");
$("#step_3").attr("disabled","disabled");
$("#step_4").attr("disabled","disabled");
$("#step_2").addClass('disabled');
$("#step_3").addClass('disabled');
$("#step_4").addClass('disabled');
}
else if($target == "#step2"){
$("#step_1").attr("disabled","disabled");
$("#step_3").attr("disabled","disabled");
$("#step_4").attr("disabled","disabled");
$("#step_1").addClass('disabled');
$("#step_3").addClass('disabled');
$("#step_4").addClass('disabled');
} 
else if($target == "#step3"){
$("#step_1").attr("disabled","disabled");
$("#step_2").attr("disabled","disabled");
$("#step_4").attr("disabled","disabled");
$("#step_1").addClass('disabled');
$("#step_2").addClass('disabled');
$("#step_4").addClass('disabled');
} else {
$("#step_1").attr("disabled","disabled");
$("#step_2").attr("disabled","disabled");
$("#step_3").attr("disabled","disabled");
$("#step_1").addClass('disabled');
$("#step_2").addClass('disabled');
$("#step_3").addClass('disabled');  
}

});

$(".next-step").click(function (e) {

var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);

});

$(".prev-step").click(function (e) {

var back = $('.wizard .nav-tabs li.previous');
back.next().removeClass('disabled');
prevTab(back);

});

});

function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
alert(back);    
$(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>

Bootstrap tabs pills disabling and with jQuery

To disable the other two tabs and later on enable them on an event you can do the following,

http://jsfiddle.net/5zjXk/1/

js

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
/*to actually disable clicking the bootstrap tab, as noticed in comments by user3067524*/
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");

    $('button').click(function(){
        /*enable next tab*/
        $('.nav li.active').next('li').removeClass('disabled');
        $('.nav li.active').next('li').find('a').attr("data-toggle","tab")
    });
});

html

<ul class="nav nav-pills">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>

    <div id='content' class="tab-content">
      <div class="tab-pane active" id="home">
        <ul>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
        </ul>
          <button>submit</button>
      </div>
      <div class="tab-pane" id="profile">
        <ul>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
        </ul>
          <button>submit</button>
      </div>
      <div class="tab-pane" id="messages">
          Tetsing
      </div>
    </div>    

---

Related Topics