Question

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

我试过这个：Can you disable tabs in Bootstrap? 它引导我去引导问题......我也尝试了$('.disabled').removeData('toggle');

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

jQuery disable a link 解决方案尝试： - event.defaultPrevented();

然而我还没有想出答案。到目前为止，我的问题是该选项卡将通过返回false来禁用。但是，当选项卡处于活动状态且可以单击时，它将不会像应该的那样转换到其他选项卡。

这是我的代码：

$(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：只需添加禁用类

JQUERY：

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

Answer 2

这是解决方案。似乎bootstrap不喜欢你手动更改活动标签。

$(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，它应该可以使用！这有点渺茫，并且没有内置于Bootstrap JavaScript的不必要的click函数。它只是禁用选项卡，并在您单击“激活”按钮时重新启用它们。

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

});

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

Answer 5

这些都不适合我。这些类只是可视元素，点击某些选项卡返回false并不会覆盖现有函数。更不用说它很难打开＆amp;基于输入关闭。

这就是我想出的......启用另一个标签将用户发回给它。

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

将标签按钮从禁用状态转为启用状态等的Javscript类似。在此代码中，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;
}

在Bootstrap中禁用选项卡

6 个答案:

非常简单的方式