Enable/Disable 使用 Jquery 的多个下拉菜单？

Question

我正在使用 Eric Hynds 的超棒下拉插件，但我需要在多个下拉菜单上使用 enable/disable 函数。我将构建的表单非常复杂，多个下拉菜单将通过漂亮的 Jquery 滑块启用。

http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#enabledisable

下面的代码中有一个 var，我不太确定它在做什么，因为还没有多个下拉菜单。关于如何实现这一目标的任何帮助？下面是页面上的小 javascript 和触发器。 我需要有单独的按钮，这样我才能触发不同的下拉菜单，但我现在不知道如何使用代码来实现。

var $widget = $("select").multiselect(), 
    state = true;

$("#toggle-disabled").click(function(){
   state = !state;
   $widget.multiselect(state ? 'disable' : 'enable');
});

然后我使用另一个插件将 list/input 项目转换为滑块，所以如果它看起来很奇怪我正在切换列表，那是因为它是捕捉鼠标事件的唯一方法。 :P

<li class="toggle-disabled"><label for="family">Family Medicine </label><input type="checkbox" id="family" name="family" />

Answer 1

$widget 变量是一个 jquery 选择器，它选择您以后可以操作的所有 <select> 元素。因此，只要您添加另一个 <select> 元素，示例中的 javascript 代码将应用于两个多选。

这是一个 jsfiddle 显示：

http://jsfiddle.net/rimig/e95y2jgL/2/

所以你会看到我刚刚添加了另一个多选：

<select name="example-disabled" disabled="disabled" multiple="multiple" size="5">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

<br>

<select name="example-disabled" disabled="disabled" multiple="multiple" size="5">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

并且您可以保持 javascript 相同，以便切换应用于两个元素。

Answer 2

Disable/Enable Multi Select DDL 使用 jquery: 首先你需要添加 "bootstrap-multiselect .js 在你的代码中。

<script src=".../js/bootstrap-multiselect.js"></script>

之后添加如下多 select DDL 代码...

<select id="ddlCategory" class="form-control" multiple="multiple">
  <option value="1">General</option>
  <option value="2">Manufacturing</option>
</select>

<button type="button" class="btn blue btn-small" onclick="BtnDisable();">Disable</button>
<button type="button" class="btn blue btn-small" onclick="BtnEnable();">Enable</button>

并添加 jquery 代码如下...

<script>
     $(function () {

        $("#ddlCategory").multiselect({
          nonSelectedText: '--Category--',
          disableIfEmpty: true,
          includeSelectAllOption: true,
          allSelectedText: 'No option left ...',
          numberDisplayed: 1,
          maxHeight: 400
        });

     });
     
    function BtnDisable(){
      $("#ddlCategory").multiselect('disable');
    }
    
    function BtnEnable(){
      $("#ddlCategory").multiselect('enable');
    }

</script>

以及结果的一些屏幕截图...

Enable/Disable 使用 Jquery 的多个下拉菜单？

Enable/Disable Multiple Dropdowns Using Jquery?

javascript

jquery

html

css

dropdown