javascript - 在 Bootstrap 中禁用选项卡

Question

我正在尝试禁用引导程序中的选项卡。我一直在研究，我还没有找到解决方案。

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

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

jQuery 禁用链接 尝试的解决方案：-event.defaultPrevented();

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

这是我的代码：

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

Answer 1

HTML：只需添加类禁用

查询：

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

Answer 2

这是解决方案。似乎引导程序不喜欢您手动更改活动标签。

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

Answer 3

试试这个：

$('#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

我将您更改.not()为 if 语句，因为我认为它导致您的事件被错误地绑定。
我还删除了两个返回 false 的点击事件，因为它们看起来是多余的。

Answer 4

尝试改用这个 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;
        }
    });

});

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

Answer 5

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

这是我想出的.. 启用另一个选项卡以将用户发送回它。

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

选项卡上的 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>

将选项卡按钮从禁用变为启用等的 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');;

}

Answer 6

非常简单的方法

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