JQuery désactiver l'onglet 3 lorsque vous cliquez sur l'onglet 2?

Question

Je suis nouveau sur ce forum alors laissez-moi d'abord vous dire un grand bonjour et merci de nous fournir un si bon site!

Je suis nouveau sur JQuery mais j'adore ça, j'ai quelques onglets JQuery qui font les choses habituelles de List/Edit/Create dans un backend.

J'ai réussi à désactiver l'onglet d'édition lors de l'affichage de l'onglet de liste (comme vous devez sélectionner un élément de liste à éditer) et il est activé lorsqu'une icône d'édition d'élément de liste est cliquée.

La question que j'ai est que si je clique ensuite sur le troisième onglet, comment désactiver le second onglet?

Ceci est mon code onglet Standard ...

$(function() 
     { 
     $("#tabs").tabs({disabled: [2]}); 

     $("#tabs").tabs();  
     } 
    ); 

HTML:

<div class="demo"> 

<div id="tabs"> 
    <ul> 
     <li><wont let me post 3 links>Jobs</a></li> 
     <li><a href="#tabs-2">Create Job</a></li> 
     <li><a href="#tabs-3">Edit Job</a></li> 
    </ul> 
    <div id="tabs-1" style="background-color: #fff"> 

     Include... 

    </div> 
    <div id="tabs-2" style="background-color: #fff"> 

     Include... 

    </div> 
    <div id="tabs-3" style="background-color: #fff"> 

     Include... 

    </div> 
</div> 

Merci

Answer 1

D'abord, vous HTML est pas correct si le plugin n'initialiaze pas bien. Le premier lien de bouton onglet est incorrect:

<li><wont let me post 3 links>Jobs</a></li> 

devrait être

<li><a href="#tabs-1">Jobs</a></li> 

Ensuite, vous initialisez deux fois le plug-in, ne le faire qu'une seule fois.
Dans le gestionnaire d'événements show, activer/désactiver les onglets en fonction de l'onglet réelle montré:

$(function() 
{ 
    $("#tabs").tabs({ 
     //disabled: [2], 
     show: function(event, ui) { 
      if (ui.index === 0) { 
       $('#tabs').tabs('enable', 1); 
       $('#tabs').tabs('enable', 2); 
      } else { 
       $('#tabs').tabs('disable', ui.index === 1 ? 2 : ui.index === 2 ? 1 : -1); 
      } 
     } 
    }); 

    /*$("#tabs").tabs();  
    }*/ 
); 

Voici un exemple de travail en direct sur jsfiddle