jQuery UI combobox'larını nasıl etkinleştirebilirim/devre dışı bırakabilirim?

Question

jquery UI kullanıyorum. 3 tane combobox'ım var ve bir önceki alan doldurulmuşsa her bir alanı etkinleştirmem gerekiyor.

aşağıdaki benim geçerli kod:

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

Answer 1

Eğer comboboxes init zaman ikinci ve üçüncü olanlar engelli varsayılan "devlet" set "seçilen" için etkinliğinizin dinleyici ayarlayabilirsiniz. JQuery UI tarafından oluşturulan oluşturulan INPUT ve BUTTON öğelerini hedefleyebilmeniz için, seçtiğiniz listeleri bir span veya div içinde benzer bir kimlikle sarmak kolay bir yol olacaktır.

Devam etmek için çok fazla içerik/kod sağlamadınız, bu yüzden başlamanıza hizmet edebilecek çalışan bir örnek HERE oluşturdum.

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>