मैं jQuery UI comboboxes को सक्षम/अक्षम कैसे कर सकता हूं?

Question

मैं jquery UI का उपयोग कर रहा हूं। मेरे पास 3 comboboxes हैं और पिछले फ़ील्ड भरने पर मुझे प्रत्येक फ़ील्ड को सक्षम करने की आवश्यकता है।

निम्नलिखित मेरे वर्तमान कोड है:

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

Answer 1

"चयनित" के लिए जब आप अपने comboboxes init, अपने दूसरे और तीसरे वालों पर विकलांग की एक डिफ़ॉल्ट "राज्य" की स्थापना की है कि आप अपने घटना श्रोता सेट कर सकते हैं। एक आसान तरीका आपकी चुनिंदा सूचियों को समान आईडी के साथ एक अवधि या div में लपेटना होगा ताकि आप jQuery UI द्वारा बनाए गए जेनरेट INPUT और BUTTON आइटम को लक्षित कर सकें।

आपने आगे बढ़ने के लिए अधिक संदर्भ/कोड प्रदान नहीं किया है, इसलिए मैंने एक कामकाजी उदाहरण HERE बनाया जो आपको प्रारंभ करने के लिए सेवा दे सकता है।

जे एस:

 // 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>