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

Question

我正在使用 Eric Hynds 的超棒下拉插件，但我需要在多个下拉菜单上使用启用/禁用功能。我将构建的表单非常复杂，多个下拉菜单将通过漂亮的 Jquery slider 启用。

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');
});

然后我使用另一个插件将列表/输入项转换为 slider ，所以如果它看起来很奇怪我正在切换列表，那是因为它是以这种方式捕获鼠标事件的唯一方法。 :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 相同，以便切换应用于两个元素。