Comment activer/désactiver les boîtes combo jQuery UI?

Question

J'utilise jquery UI. J'ai 3 comboboxes et je dois activer chaque champ si le précédent a été rempli.

Voici mon code actuel:

jQuery(document).ready(function(){ 
     $("#box1").combobox(); 
     $("#box2").combobox(); 
     $("#box3").combobox(); 
}); 

Answer 1

vous pouvez configurer votre écouteur d'événement pour « sélectionné » lorsque vous Initialiser votre comboboxes, définissez un défaut « état » des personnes handicapées sur votre deuxième et troisième. Un moyen facile serait d'envelopper vos listes de sélection dans un span ou un div avec l'ID similaire afin que vous puissiez cibler les éléments INPUT et BUTTON générés créés par jQuery UI.

Vous n'avez pas fourni beaucoup de contexte/code pour continuer, j'ai donc créé un exemple de travail HERE qui pourrait vous aider à démarrer.

JS:

 // init autocomplete combobox 1 with event handler 
     $("#box1").combobox({ 
     selected: function(event, ui) { 
      // now that we have an event listener, we can do whatever we like on the event. 
      $("#test2 input").removeAttr('disabled'); 
      $("#test2 button").removeAttr('disabled'); 
     } 
     }); 

     // init autocomplete combobox 2 with event handler 
     $("#box2").combobox({ 
     selected: function(event, ui) { 
      // now that we have an event listener, we can do whatever we like on the event. 
      $("#test3 input").removeAttr('disabled'); 
      $("#test3 button").removeAttr('disabled'); 
     } 
     });  

    $("#box3").combobox(); // init autocomplete combobox 3 

    // set initial state of generated combobox 2 
    $("#test2 input").attr('disabled',true); 
    $("#test2 button").attr('disabled',true); 

    // set initial state of generated combobox 3 
    $("#test3 input").attr('disabled',true); 
    $("#test3 button").attr('disabled',true); 

HTML:

<div class="demo"> 
    <div class="ui-widget"> 
    <div id="test1"> 
     <label>Box 1: </label> 
     <select id="box1"> 
     <option value="">Select one...</option> 
     <option value="ActionScript">ActionScript</option> 
     <option value="AppleScript">AppleScript</option> 
     <option value="Asp">Asp</option> 
     <option value="BASIC">BASIC</option> 
     <option value="C">C</option> 
     <option value="C++">C++</option> 
     <option value="Clojure">Clojure</option> 
     <option value="COBOL">COBOL</option> 
     <option value="ColdFusion">ColdFusion</option> 
     <option value="Erlang">Erlang</option> 
     <option value="Fortran">Fortran</option> 
     <option value="Groovy">Groovy</option> 
     <option value="Haskell">Haskell</option> 
     </select> 
    </div> 
    <div id="test2"> 
     <label>Box 2: </label> 
     <select id="box2"> 
     <option value="">Select one...</option> 
     <option value="Java">Java</option> 
     <option value="JavaScript">JavaScript</option> 
     <option value="Lisp">Lisp</option> 
     <option value="Perl">Perl</option> 
     <option value="PHP">PHP</option> 
     <option value="Python">Python</option> 
     <option value="Ruby">Ruby</option> 
     <option value="Scala">Scala</option> 
     <option value="Scheme">Scheme</option> 
     </select> 
    </div> 
    <div id="test3"> 
     <label>Box 3: </label> 
     <select id="box3"> 
     <option value="">Select one...</option> 
     <option value="BASIC">BASIC</option> 
     <option value="C">C</option> 
     <option value="C++">C++</option> 
     <option value="Clojure">Clojure</option> 
     <option value="COBOL">COBOL</option> 
     <option value="ColdFusion">ColdFusion</option> 
     </select> 
    </div>  
    </div> 
</div>