CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Jared Eitnier
Jared Eitnier

Reputation: 7152

javascript stop twitter bootstrap tab link from activating

I'm using TB 3 in my app. I'm using some nav tabs and I want to by default disable a few as follows (this is not part of a drop-down menu):

<ul class="nav">
    <li class="disabled"><a href="#tab" data-toggle="tab">Tab</a></li>
</ul>

My disable function:

$('.nav li.disabled').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
});

The goal is to remove .disabled when a condition is met so the link is re-enabled or clickable again. This changes the appearance of the tab only, not the functionality. Further tests show shown.bs.tab is still fired no matter what I do here.

Upvotes: 0

Views: 1357

Answers (1)

Saran
Saran

Reputation: 3885

Apparently, bootstrap doesn't "like" changing active tabs.

Here's the working jsFiddle (Bootstrap 3.0). And the working jsFiddle (Bootstrap 2.3.2). Here's the idea:

$(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) {
    $('li').removeAttr("disabled");
    $('#bank-tab').attr('class', 'active');
    $('#store-tab').attr('class', '');
  });
});

Courtesy of.

Upvotes: 2

Related Questions