Désactivation des onglets dans Bootstrap

J'essaie de désactiver les onglets dans 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 à des problèmes d'amorçage … J'ai également essayé $('.disabled').removeData('toggle');

J'ai regardé ici … https://github.com/twitter/bootstrap/issues/2764 Solution Tentative: – Renvoi faux

JQuery désactiver un lien Solution Tentative: – event.defaultPrevented();

Et pourtant, je n'ai pas trouvé de réponse. Jusqu'à présent, mon problème est que l'onglet sera désactivé, en renvoyant faux. Toutefois, lorsque l'onglet est actif et que vous pouvez cliquer, il ne se transmettra pas à 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', ''); }); });

HTML: ajoutez simplement la classe désactivée

JQUERY:

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

Voici la solution. Il semble que bootstrap n'aime pas que vous modifiez manuellement les balises actives.

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

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 instruction if, car je pense que cela faisait que vos événements n'étaient liés de manière incorrecte.
J'ai également supprimé les deux événements de clic qui sont simplement retournés faux car ils semblaient superflus.

Essayez d'utiliser ce JavaScript à la place et cela devrait fonctionner! C'est un peu plus mince et n'a pas les fonctions de click inutiles qui sont déjà intégrées au 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 (onglets désactivés). Ajoutez une classe d' 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 qui correspondent à ul.nav li.disabled supprimez la classe désactivée (pour réactiver les onglets).

Aucun de ceux-ci n'a fonctionné pour moi. Les classes n'étaient que des éléments visuels, et le renvoi faux sur le clic sur certains onglets n'a pas annulé la fonction existante. Sans oublier qu'il est difficile d'activer et de désactiver la touche en fonction de l'entrée.

Voici ce que j'ai proposé … pour permettre à un autre onglet de lui envoyer l'utilisateur.

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

Le 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 Javscript qui tourne le bouton de tabulation de désactivé à activé etc. est semblable. Dans ce code, l'élément de rentaldropdown est un autre menu déroulant <select> qui dicte si l'onglet doit être activé ou désactivé. Exécutez cette fonction en tant que déclencheur d' 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');; }

Voie très simple

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