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
To disable a tab, we can remove the attribute : data-toggle=”tab” from the tab part enclosed under 'a' element.
The data-toggle is an HTML-5 data attribute defined in Bootstrap. The advantage of using this is that, you can select a class or an id and hook up the element with a particular widget.
How do I make a tab not clickable? You can use :not() CSS selector with pointer-events: none; to disable click event.
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');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With