Q:

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

I want to select all options expect the disabled options of a multi select box using jquery. Here is my code,
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);
  }
});

When clicking on select all check box it select both enabled and disabled options. How can I select only enabled items ?
This is my jsfiddle

A:

You can use the :enabled selector to achieve this. You can also remove the if statement by simply setting the property to the state of the checkbox. You should also use the change event of the checkbox to enable this functionality for people who browse the using the keyboard.
$('#select_all_agent').on('change', function() {
    $('#agents option:enabled').prop('selected', this.checked);
});

Example fiddle

