CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapjquery-events
ryandawkins
ryandawkins

Reputation: 1545

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

Upvotes: 8

Views: 41326

Answers (6)

Rubel Hossain
Rubel Hossain

Reputation: 2733

Very Simple Way

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

Upvotes: 0

Pastilla
Pastilla

Reputation: 91

HTML: Just add class disabled

JQUERY:

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

Upvotes: 9

jeffkee
jeffkee

Reputation: 5238

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

}

Upvotes: 1

ryandawkins
ryandawkins

Reputation: 1545

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

Upvotes: 8

kyle.stearns
kyle.stearns

Reputation: 2346

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

Upvotes: 1

Sara
Sara

Reputation: 8242

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.

Upvotes: 1

Related Questions