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

Question

我想 select 所有选项都希望使用 jquery 的多 select 框的禁用选项。这是我的代码，

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

单击 select 全部复选框时，它 select 启用和禁用选项。我怎样才能 select 只启用项目？

这是我的jsfiddle

Answer 1

请试试这个

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

DEMO1 FIDDLE

或

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

DEMO2 FIDDLE

.not() method constructs a new jQuery object from a subset of the matching elements.The .not() method will end up providing you with more readable selections than pushing complex selectors or variables into a :not() 选择器过滤器。在大多数情况下，这是一个更好的选择。

Answer 2

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

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

Example fiddle

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

How to select only enabled options of a select box using jquery ?

jquery

select

multi-select