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

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

JQuery Chosen Plugin 参考文档

posted @ 2017-06-23 16:17  Alitty  阅读(2701)  评论(0编辑  收藏  举报