¿Cómo puedo habilitar/deshabilitar los cuadros combinados de la interfaz de usuario jQuery?

Question

Estoy usando jquery UI. Tengo 3 cuadros combinados y necesito habilitar cada campo si el anterior se ha llenado.

La siguiente es mi código actual:

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

Answer 1

se puede configurar el detector de eventos para "seleccionado" cuando init sus cuadros combinados, establecer un "estado" por defecto de personas con discapacidad en sus segundo y el tercero. Una manera fácil sería envolver sus listas de selección en un tramo o div con id similar para que pueda orientar los artículos generados INPUT y BUTTON creados por jQuery UI.

No proporcionó mucho contexto/código para continuar, así que creé un ejemplo de trabajo HERE que podría servirle para comenzar.

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>