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

Question

我想使用 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

Answer 1

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

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

Example fiddle