jQuery Chosen plugin（jQuery Chosen 下拉框插件）动态设置选项option的disabled属性值方法...

最新推荐文章于 2023-07-27 17:45:32 发布

weixin_34179968

最新推荐文章于 2023-07-27 17:45:32 发布

阅读量310

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Elvis-Elvis/p/7070503.html

版权

 1 <div>
 2     <select id="ddlList1" class="my_select_box" data-placeholder="Select Your Options">
 3     <option value="1">Option 1</option>
 4     <option value="2" selected>Option 2</option>
 5     <option value="3" disabled>Option 3</option>
 6   </select>
 7 </div>
 8 <div>
 9     <select id="ddlList2" class="my_select_box" data-placeholder="Select Your Options">
10     <option value="1">Option 1</option>
11     <option value="2" selected>Option 2</option>
12     <option value="3" disabled>Option 3</option>
13   </select>
14 </div>

解决ddlList1的Option 1选项选择时ddlList2的Option 1选项失效，或ddlList2的Option 1选项选择时ddlList1的Option 1选项失效，即两个下拉框中的选项互斥的需求，方法如下：

 1 $("#ddlList1").chosen().change(function (evt, arg) {
 2     if (arg && arg.selected && $("#ddlList2 option[value='" + arg.selected + "']")) {
 3         $("#ddlList2 option[value='" + arg.selected + "']").attr("disabled", "");
 4     } else if (arg && arg.deselected) {
 5         $("#ddlList2 option[value='" + arg.deselected + "']").removeAttr("disabled");
 6     } else {
 7         return;
 8     }
 9 
10     $("#ddlList2").trigger("chosen:updated");
11 });
12 
13 $("#ddlList2").chosen().change(function (evt, arg) {
14     if (arg && arg.selected) {
15         $("#ddlList1 option[value='" + arg.selected + "']").attr("disabled", "");
16     } else if (arg && arg.deselected) {
17         $("#ddlList1 option[value='" + arg.deselected + "']").removeAttr("disabled");
18     } else {
19         return;
20     }
21 
22     $("#ddlList1").trigger("chosen:updated");
23 });