Disabling Tabs in Bootstrap

Question

I am trying to disable the tabs in bootstrap. I have been researching and I have not yet found a solution.

I have tried this: Can you disable tabs in Bootstrap? It has lead me to the bootstrap issues... I also tried $('.disabled').removeData('toggle');

I looked here.. https://github.com/twitter/bootstrap/issues/2764 Solution Attempted: - Returning false

jQuery disable a link Solution Attempted: - event.defaultPrevented();

And yet I have not come up with an answer. So far my problem is that the tab will disable, by returning false. However, when the tab is active and can be clicked it will not transition to the other tab like it should.

jsfiddle: http://jsfiddle.net/de8QK/

Here is my code:

$(document).ready(function(){

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

$('#store-tab').not('#store-tab.disabled').click(function(event){
    $('#store-tab').attr('class', 'active');
    $('#bank-tab').attr('class', '');
    return true;
});
$('#bank-tab').not('#bank-tab.disabled').click(function(event){
    $('#bank-tab').attr('class' ,'active');
    $('#store-tab').attr('class', '');
    return true;
});

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

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

If you want disabled tabs with Next/Previous buttons, check this http://stackoverflow.com/a/20672122/563309 — JenonD, Dec 19 '13 at 02:04

score 9 · Answer 1 · answered Jul 16 '15 at 11:34

9

HTML: Just add class disabled

JQUERY:

$(".disabled").click(function (e) {
        e.preventDefault();
        return false;
});

answered Jul 16 '15 at 11:34

Pastilla

91
1
1

score 8 · Accepted Answer · edited Jan 20 '15 at 09:41

8

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', '');
    });
});

edited Jan 20 '15 at 09:41

arulmr

7,806
8
48
67

answered Jan 23 '13 at 17:51

ryandawkins

1,487
4
23
37

I actually can't get any of the posted solutions to work for me on jsFiddle, but I'm glad you found something that works for you. – Sara Jan 23 '13 at 17:59
That is strange that it won't work on jsFiddle.. The code I am using for my project and on jsFiddle are identical with the exception of the content in the tabs... – ryandawkins Jan 23 '13 at 18:14
Ha, there's a typo in your bootstrap.js include - ` – Sara Jan 23 '13 at 18:41
@Sara That is weird! My code is working on my machine but not on the fiddle. Ah well, at least a solution was found! – kyle.stearns Jan 23 '13 at 21:01
@kyle.stearns the culprit is the space in the `bootstrap.js` include in the fiddle. – Sara Jan 23 '13 at 21:15
Doesn't work for me either. Even if I put a `console.log` function to show that the `disabled` class was detected, it still goes ahead to open the tab anyway. – jeffkee Jan 28 '15 at 09:29

score 1 · Answer 3 · answered Jan 23 '13 at 17:26

1

Try this:

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

jsFiddle

I changed your .not() to an if statement, as I think it was causing your events to be bound incorrectly.
I also removed the two click events that just returned false as they seemed superfluous.

answered Jan 23 '13 at 17:26

Sara

8,064
1
32
50

This makes the tabs clickable, however the content does not change. Which means the data toggle is not happening I suppose? Would returning true cause the problem? I tried removing the return true statement. It didn't change any effect. – ryandawkins Jan 23 '13 at 17:35
I have isolated the problem to the lines which change the class attributes of #bank-tab and #store-tab. I don't understand how those are affecting the issue however. When those are commented out everything functions normally. I suppose it was interfering with bootstrap? – ryandawkins Jan 23 '13 at 17:45

kyle.stearns · Answer 4 · 2013-01-23T19:49:02.433

Try using this JavaScript instead and it should work! This is a bit more slim and doesn't have the unnecessary click functions that are already built-in to the Bootstrap JavaScript. It simply disables the tabs, and re-enables them when you click on the 'Activate' button.

$(document).ready(function(){

    $('.nav li').attr('class', 'disabled');
    $('#bank-tab').addClass('active');

    $('.selectKid').click(function(e){
        if ( $('.disabled').length > 0 ) {
           $('.disabled').removeClass('disabled');
           return false;
        }
    });

});

Explanation: When the document is loaded add a class of disabled to .nav li (disable tabs). Add a class of active to the #bank-tab element (for styling purposes). When you click the 'Activate Tabs' button, if there are any elements that match ul.nav li.disabled remove the disabled class (to re-enable the tabs).

score 1 · Answer 5 · answered Jan 28 '15 at 09:34

None of these worked for me. The classes were only visual elements, and returning false on click on certain tabs didn't override the existing function. Not to mention it's hard to turn the tab on & off based on input.

Here's what I came up with.. to enable another tab to send the user back to it.

$('#rentalstab_button').click(function(event){
    if ($(this).hasClass('disabled')) {
        $('#detailstab_button').trigger('click');
        return false;
    }
});

The HTML on the tab triggers:

<li role="presentation"><a href="#basicinfotab" role="tab" data-toggle="tab">Basic Info</a></li>
<li role="presentation"><a href="#detailstab" role="tab" data-toggle="tab" id="detailstab_button">Details</a></li>
<li role="presentation"><a href="#rentalstab" role="tab" data-toggle="tab" id="rentalstab_button">Rental</a></li>

The Javscript that turns the tab button from disabled to enabled etc. is similar. In this code the rentaldropdown element is another <select> dropdown that dictates whether the tab should be enabled or disabled. Run this function attached as a onchange trigger.

if(rentaldropdown.val()==1) {
    // $( "#listing_form_tab" ).tabs("enable", 3);
    console.log('enabling rental');
    $('#rentalstab_button').prop( "disabled", false ).removeClass('disabled');

} else {
    console.log('disabling rental');
    $('#rentalstab_button').prop( "disabled", true ).addClass('disabled');;

}

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

0

Very Simple Way

.nav-tabs li.active a{
    pointer-events:none;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 10 '17 at 04:35

Rubel Hossain

1,709
1
17
19

Disabling Tabs in Bootstrap

6 Answers6

Very Simple Way

Linked