Geek Answers Handbook

How to enable / disable jQuery UI dropdowns?

I am using jquery user interface. I have 3 comboboxes and I need to include each field if the previous one was filled.

Below is my current code:

 jQuery(document).ready(function(){  
        $("#box1").combobox();  
        $("#box2").combobox();  
        $("#box3").combobox();  
 });
+5
source share
1 answer

you can set the event listener to "selected" when you run your lists, set the default "state" for your second and third. An easy way would be to make your select lists in a range or div with a similar identifier, so that you can target the elements created INPUTand those BUTTONcreated by jQuery UI.

/ , , .

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>
+6

More articles:


All Articles