Как включить / отключить комбинированные списки jQuery UI?

Question

Я использую jquery UI. У меня есть 3 поля со списком, и мне нужно включить каждое поле, если предыдущее было заполнено.

Вот мой текущий код:

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

Answer 1

вы можете настроить прослушиватель событий на «выбранный», когда вы запускаете свои комбинированные списки, установить «состояние» по умолчанию для отключенного на втором и третьем.Самый простой способ - заключить списки выбора в span или div с одинаковым идентификатором, чтобы вы могли нацеливаться на сгенерированные элементы INPUT и BUTTON, созданные в пользовательском интерфейсе jQuery.

Вы не предоставили много контекста / кода для продолжения, поэтому я создал рабочий пример ЗДЕСЬ , который может помочь вам начать работу.

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>