I have a list of tabs with elements that can be disabled - i.e. non-clickable. And when 'disabled' is added as a class, then the mouse over on the element is indicating that the tab is non-clickable. Unfortunately the element is clickable. I am trying to remove the datatoggle="tab" from the element when the element is disabled, but my jQuery skills aren't sufficient.

I have a ul of class="nav nav-tabs" with id="myTabs" And I'm trying to remove the data-toggle attribute with this jQuery statement:

$('#myTabs a').is('.disabled').removeAttr('data-toggle');

Bootply example

I have a list of tabs with elements that can be disabled - i.e. non-clickable. And when 'disabled' is added as a class, then the mouse over on the element is indicating that the tab is non-clickable. Unfortunately the element is clickable. I am trying to remove the datatoggle="tab" from the element when the element is disabled, but my jQuery skills aren't sufficient.

I have a ul of class="nav nav-tabs" with id="myTabs" And I'm trying to remove the data-toggle attribute with this jQuery statement:

$('#myTabs a').is('.disabled').removeAttr('data-toggle');

Bootply example

• javascript
• jquery
• html
• twitter-bootstrap
• bootstrap-tabs

• 1 You're looking for an <a> element that is disabled, but actually the class is applied to the <li> element. – dcclassics Commented Jul 7, 2014 at 13:33
• Does the active/inactive state of the li elements change in your page, or do they remain 'static'? – David Thomas Commented Jul 7, 2014 at 15:21
• Well active state changes when a tab is selected - are you thinking of disabled/enabled state? The elements can change disabled/enabled state - and that is actually my next problem. It seems that UI does not change: If a tab changes from disabled to enabled, then the mouse over icon, still looks like the tab is disabled. This is a new problem and I will properbly create a new question if I can't solve the issue. – peterbf Commented Jul 8, 2014 at 6:31

2 Answers 2

You can try this:-

$('#tabs li.disabled').find('a').removeAttr('data-toggle');

or

$('#tabs li.disabled a').removeAttr('data-toggle');

Demo

$('#myTabs a').is('.disabled') returns a boolean: false - you cannot call removeAttr on this!

Second your disabled class is on your li, not your .

Try this:

$('#myTabs li.disabled a').removeAttr('data-toggle');