javascript stop twitter bootstrap tab link from activating

Question

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.

likely simpler to just use tab styling and write own tab change code — charlietfl, Nov 08 '13 at 21:14
Since the link is supposed to be inactive, why is its not responding to clicks a problem? — Jon, Nov 08 '13 at 21:25
When the `.disabled` class is removed, I'd like the link to be clickable or re-enabled. — Jared Eitnier, Nov 09 '13 at 00:17
I wasn't able to get it working. Instead I just hid the element with `display:none` until my object was ready in the DOM — Jared Eitnier, Nov 11 '13 at 14:51

score 2 · Accepted Answer · edited May 23 '17 at 12:08

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.

Works the same way with Bootstrap 2.3.2. I've listen new fiddle in my answer. — Saran, Nov 09 '13 at 15:20

javascript stop twitter bootstrap tab link from activating

1 Answers1