Disabling Tabs in Bootstrap

问题

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

回答1:

HTML: Just add class disabled

JQUERY:

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

回答2:

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

回答3:

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.

回答4:

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).

回答5:

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

}

回答6:

Very Simple Way

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

来源：https://stackoverflow.com/questions/14484445/disabling-tabs-in-bootstrap