jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何启用/禁用jQuery UI组合框?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 jquery UI.我有3个组合框,如果前一个已填满,我需要启用每个字段.

以下是我目前的代码

jQuery(document).ready(function(){  
        $("#Box1").comboBox();  
        $("#Box2").comboBox();  
        $("#Box3").comboBox();  
 });

解决方法

您可以在启动组合框时为“选定”设置事件监听器,在第二个和第三个组件上设置禁用的认“状态”.一种简单的方法是将选择列表包装在具有相似id的span或div中,以便您可以定位由jQuery UI创建的生成的INPUT和BUTTON项.

您没有提供太多的上下文/代码,因此我创建了一个可用于帮助您入门的工作示例HERE.

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="scheR_821_11845@e">scheR_821_11845@e</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>

大佬总结

以上是大佬教程为你收集整理的如何启用/禁用jQuery UI组合框?全部内容,希望文章能够帮你解决如何启用/禁用jQuery UI组合框?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。