Javascript 在 Bootstrap 中禁用选项卡

Disabling Tabs in Bootstrap

提问by ryandawkins

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

我试过这个：你能在 Bootstrap 中禁用标签吗？它导致我遇到引导问题......我也尝试过$('.disabled').removeData('toggle');

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

我看这里.. https://github.com/twitter/bootstrap/issues/2764尝试的解决方案： - 返回假

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

jQuery 禁用链接解决方案尝试：-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.

然而我还没有想出答案。到目前为止，我的问题是该选项卡将通过返回 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/

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

采纳答案by ryandawkins

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

回答by Pastilla

HTML: Just add class disabled

HTML：只需添加禁用的类

JQUERY:

查询：

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

回答by jeffkee

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.

这些都不适合我。这些类只是视觉元素，单击某些选项卡时返回 false 不会覆盖现有功能。更不用说根据输入打开和关闭选项卡很困难。

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:

选项卡上的 HTML 触发：

<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 rentaldropdownelement is another <select>dropdown that dictates whether the tab should be enabled or disabled. Run this function attached as a onchangetrigger.

将选项卡按钮从禁用变为启用等的 JavaScript 是类似的。在此代码中，rentaldropdown元素是另一个<select>下拉列表，它指示应启用还是禁用选项卡。运行作为onchange触发器附加的此函数。

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

}

回答by Sara

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

js小提琴

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.

我将您更改.not()为 if 语句，因为我认为它会导致您的事件绑定不正确。
我还删除了两个刚刚返回 false 的点击事件，因为它们似乎是多余的。

回答by kyle.stearns

Try using this JavaScript instead and it should work! This is a bit more slim and doesn't have the unnecessary clickfunctions 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.

尝试改用这个 JavaScript，它应该可以工作！这更精简一些，并且没有clickBootstrap JavaScript 中已经内置的不必要的函数。它只是禁用选项卡，并在您单击“激活”按钮时重新启用它们。

$(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 disabledto .nav li(disable tabs). Add a class of activeto the #bank-tabelement (for styling purposes). When you click the 'Activate Tabs' button, if there are any elements that match ul.nav li.disabledremove the disabled class (to re-enable the tabs).

说明：加载文档时添加类disabledto .nav li（禁用选项卡）。active向#bank-tab元素添加一个类（用于样式目的）。当您单击“激活选项卡”按钮时，如果有任何匹配的元素，请ul.nav li.disabled删除禁用的类（以重新启用选项卡）。

回答by Rubel Hossain

Very Simple Way

很简单的方法

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