Question

我正在使用Eric Hynds＆＃39;真棒下拉插件，但我需要在多个下拉菜单上使用启用/禁用功能。我将构建的表单非常复杂，可以通过漂亮的Jquery滑块启用多个下拉列表。

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

下面的代码有一个变量，我不太确定它已经做了什么，因为没有多次下降。有关如何实现这一目标的任何帮助？下面是页面上的小javascript和触发器。 我需要单独的按钮，以便触发不同的下拉菜单，但我现在还没有看到如何使用代码。

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

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

然后我使用另一个插件将列表/输入项转换为滑块，所以如果看起来很奇怪我会从列表中切换，那是因为它是唯一可以捕获的方法这样的鼠标事件。：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

使用 jquery 禁用/启用多选 DDL：首先，您需要在代码中添加 "bootstrap-multiselect.js"。

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

然后添加多选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>

还有一些结果截图...

使用Jquery启用/禁用多个下拉列表？

2 个答案: