8

ブートストラップでタブを無効にしようとしています。私は研究を続けてきましたが、まだ解決策を見つけていません。

私はこれを試しました: Bootstrap でタブを無効にできますか? それは私をブートストラップの問題に導きました...私も試しました$('.disabled').removeData('toggle');

私はここを見ました.. https://github.com/twitter/bootstrap/issues/2764 試みた解決策: - falseを返す

jQuery リンクを無効にする 試みた解決策: -event.defaultPrevented();

それでも答えは出ていません。これまでのところ、私の問題は、false を返すことによってタブが無効になることです。ただし、タブがアクティブでクリックできる場合、本来のように別のタブに遷移しません。

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

6 に答える 6

9

HTML: 無効なクラスを追加するだけ

Jクエリ:

$(".disabled").click(function (e) {
        e.preventDefault();
        return false;
});
于 2015-07-16T11:34:25.930 に答える
8

これが解決策です。ブートストラップは、アクティブなタグを手動で変更することを好まないようです。

$(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', '');
    });
});
于 2013-01-23T17:51:45.877 に答える
1

代わりにこの JavaScript を使用してみてください。動作するはずです! これはもう少しスリムでclick、Bootstrap 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;
        }
    });

});

説明:disabledドキュメントがロードされたら、 to .nav li(タブを無効にする)のクラスを追加します。activeのクラスを要素に追加し#bank-tabます (スタイリング目的で)。[タブを有効にする] ボタンをクリックしたときに、一致する要素がある場合はul.nav li.disabled、無効になっているクラスを削除します (タブを再度有効にするため)。

于 2013-01-23T17:45:32.693 に答える
1

これらのどれも私にとってはうまくいきませんでした。クラスは単なる視覚要素であり、特定のタブをクリックすると 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');;

}
于 2015-01-28T09:34:11.007 に答える
1

これを試して：

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

jsフィドル

.not()イベントが正しくバインドされていないと思われるため、if ステートメントに変更しました。
また、false を返した 2 つのクリック イベントは不要に思えたので削除しました。

于 2013-01-23T17:26:18.900 に答える
0

とてもシンプルな方法

.nav-tabs li.active a{
    pointer-events:none;
}
于 2017-02-10T04:35:39.780 に答える