it-swarm.com.de

Deaktivieren von Registerkarten in Bootstrap

Ich versuche die Tabs im Bootstrap zu deaktivieren. Ich habe recherchiert und noch keine Lösung gefunden.

Ich habe Folgendes versucht: Können Sie Registerkarten in Bootstrap deaktivieren? Es hat mich zu den Bootstrap-Problemen geführt ... Ich habe auch versucht, $('.disabled').removeData('toggle');

Ich habe hier nachgesehen. https://github.com/Twitter/bootstrap/issues/2764 Lösungsversuch: - Falsche Rückgabe

jQuery deaktiviere einen Link Lösungsversuch: - event.defaultPrevented();

Und doch habe ich keine Antwort gefunden. Bisher besteht mein Problem darin, dass die Registerkarte deaktiviert wird, indem false zurückgegeben wird. Wenn die Registerkarte jedoch aktiv ist und angeklickt werden kann, wechselt sie nicht wie gewünscht zur anderen Registerkarte.

jsfiddle: http://jsfiddle.net/de8QK/

Hier ist mein 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', '');
});
});
8
RyanDawkins

Hier ist die Lösung. Es scheint, dass Bootstrap es nicht mag, wenn Sie die aktiven Tags manuell ändern.

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

HTML: Fügen Sie einfach die deaktivierte Klasse hinzu

JQUERY:

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

Verwenden Sie stattdessen dieses JavaScript und es sollte funktionieren! Dies ist etwas schlanker und verfügt nicht über die unnötigen click-Funktionen, die bereits in das Bootstrap-JavaScript integriert sind. Die Registerkarten werden einfach deaktiviert und wieder aktiviert, wenn Sie auf die Schaltfläche "Aktivieren" klicken.

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

});

Erläuterung: Wenn das Dokument geladen ist, fügen Sie eine Klasse von disabled zu .nav li hinzu (Tabulatoren deaktivieren). Fügen Sie dem #bank-tab -Element eine Klasse von active hinzu (für Gestaltungszwecke). Wenn Sie auf die Schaltfläche "Registerkarten aktivieren" klicken, entfernen Sie die deaktivierte Klasse (um die Registerkarten wieder zu aktivieren), wenn Elemente vorhanden sind, die mit ul.nav li.disabled übereinstimmen.

1
kyle.stearns

Nichts davon hat bei mir funktioniert. Die Klassen waren nur visuelle Elemente, und die Rückgabe von false beim Klicken auf bestimmte Registerkarten hat die vorhandene Funktion nicht überschrieben. Ganz zu schweigen davon, dass es schwierig ist, die Registerkarte basierend auf der Eingabe ein- und auszuschalten.

Folgendes habe ich mir ausgedacht ..., damit ein anderer Tab den Benutzer zurückschicken kann.

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

Der HTML-Code auf der Registerkarte löst Folgendes aus:

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

Das Javscript, mit dem die Registerkarte von deaktiviert auf aktiviert usw. umgeschaltet wird, ist ähnlich. In diesem Code ist das Element rentaldropdown ein weiteres Dropdown-Menü <select>, das festlegt, ob die Registerkarte aktiviert oder deaktiviert werden soll. Führen Sie diese Funktion als onchange Trigger aus.

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

}
1
jeffkee

Versuche dies:

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

Ich habe Ihre .not() in eine if-Anweisung geändert, da ich glaube, dass Ihre Ereignisse dadurch falsch gebunden wurden.
Ich habe auch die beiden Klickereignisse entfernt, die gerade falsch zurückgegeben wurden, da sie überflüssig schienen.

1
Sara

Sehr einfacher Weg

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