如何使用jquery仅选择选择框的启用选项?

时间:2016-01-07 09:41:43

标签: jquery select multi-select

我想使用jquery选择期望多选框的禁用选项的所有选项。这是我的代码,

HTML

<select id="agents" multiple="multiple">
   <option value="1">Mango</option>
   <option value="2" disabled="disabled">Apple</option>
   <option value="3" disabled="disabled">Banana</option>
   <option value="4">Guava</option>
   <option value="5">Orange</option>
</select>
<input type="checkbox" id="select_all_agent">
<label>Select All</label>

JQUERY

$('#select_all_agent').on('click', function () {
if($("#select_all_agent").is(':checked')){
    $('#agents option').prop('selected', true);
  }
  else{
      $('#agents option').prop('selected', false);
  }
});

单击全选复选框时,选择启用和禁用选项。如何仅选择已启用的项目?

这是我的jsfiddle

2 个答案:

答案 0 :(得分:3)

您可以使用:enabled选择器来实现此目的。您也可以通过简单地将属性设置为复选框的状态来删除if语句。您还应该使用复选框的change事件为使用键盘浏览的人启用此功能。

$('#select_all_agent').on('change', function() {
    $('#agents option:enabled').prop('selected', this.checked);
});

Example fiddle

答案 1 :(得分:1)

请尝试此

 $('option:not([disabled])').prop('selected', this.checked);

DEMO1 FIDDLE

$('#agents option').not( "[disabled]" ).prop('selected', this.checked)

DEMO2 FIDDLE

.not()方法从匹配元素的子集构造一个新的jQuery对象。.not()方法最终将为您提供比将{{3}复杂的选择器或变量推送出来更可读的选择选择器过滤器。在大多数情况下,这是一个更好的选择。