web-dev-qa-db-fra.com

Désactivation des onglets dans Bootstrap

J'essaie de désactiver les onglets dans le bootstrap. J'ai fait des recherches et je n'ai pas encore trouvé de solution.

J'ai essayé ceci: Pouvez-vous désactiver les onglets dans Bootstrap? Cela m'a conduit aux problèmes de bootstrap ... J'ai aussi essayé $('.disabled').removeData('toggle');

J'ai regardé ici .. https://github.com/Twitter/bootstrap/issues/2764 Solution tentée: - Retour de faux

jQuery désactive un lien Solution essayée: - event.defaultPrevented();

Et pourtant je n'ai pas trouvé de réponse. Jusqu'à présent, le problème est que l'onglet sera désactivé en renvoyant false. Cependant, lorsque l'onglet est actif et que vous pouvez cliquer dessus, il ne sera pas transféré vers l'autre onglet comme il le devrait.

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

Voici mon 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', '');
});
});
javascriptjqueryjavascript-eventstwitter-bootstrap
8
RyanDawkins

Voici la solution. Il semble que bootstrap n'aime pas que vous changiez manuellement les tags actifs.

$(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: Il suffit d'ajouter la classe désactivée

JQUERY:

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

Essayez d'utiliser ce JavaScript à la place et cela devrait fonctionner! Ceci est un peu plus fin et ne contient pas les fonctions click inutiles déjà intégrées au code JavaScript Bootstrap. Il désactive simplement les onglets et les réactive lorsque vous cliquez sur le bouton "Activer".

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

});

Explication: Lorsque le document est chargé, ajoutez une classe de disabled à .nav li (désactiver les onglets). Ajoutez une classe de active à l'élément #bank-tab (à des fins de style). Lorsque vous cliquez sur le bouton 'Activer les onglets', s'il existe des éléments correspondant à ul.nav li.disabled, supprimez la classe désactivée (pour réactiver les onglets).

1
kyle.stearns

Aucun de ceux-ci n'a fonctionné pour moi. Les classes n'étaient que des éléments visuels, et renvoyer false en cliquant sur certains onglets ne remplaçait pas la fonction existante. Sans compter qu'il est difficile d'activer et de désactiver l'onglet en fonction des entrées.

Voici ce que je suis venu avec .. pour permettre à un autre onglet pour renvoyer l'utilisateur.

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

Le code HTML sur l'onglet déclenche:

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

Le script Java qui fait passer le bouton d'onglet de désactivé à activé, etc. est similaire. Dans ce code, l'élément rentaldropdown est un autre menu déroulant <select> qui indique si l'onglet doit être activé ou désactivé. Exécutez cette fonction attachée en tant que déclencheur 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');;

}
1
jeffkee

Essaye ça:

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

J'ai changé votre .not() en une déclaration if, car je pense que cela provoquait une mauvaise liaison de vos événements.
J'ai également supprimé les événements de clic qui venaient de renvoyer faux car ils semblaient superflus.

1
Sara

Manière très simple

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