title: Disable unselected options from optgroup in mulitiselect dropdown using jquery
body: <p>In my multiselect i have several optgroups .
  I want to allow user to select only one option from a optgroup . 
  As soon user select any one option from any optgroup I want disable all other options from same group not for other optgroups .
  I tried following code 
  Html</p>
  
  <pre><code>    &lt;option selected="selected" label="All" value=""&gt;All&lt;/option&gt;
  &lt;optgroup label="fruits" class="fruit"&gt;
      &lt;option label="apple" value="1"&gt;Apple&lt;/option&gt;
      &lt;option label="pear" value="2"&gt;Pear&lt;/option&gt;
      &lt;option label="orange" value="3"&gt;Orange&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="berries" class="berries"&gt;
      &lt;option label="strawberry" value="4"&gt;Strawberry&lt;/option&gt;
      &lt;option label="raspberry" value="5"&gt;Raspberry&lt;/option&gt;
      &lt;option label="blueberry" value="6"&gt;Blueberry&lt;/option&gt;
  &lt;/optgroup&gt;
  </code></pre>
  
  <p></p>
  
  <p>Javascript: </p>
  
  <pre><code>$("#fruits").change(function () {
      $("#fruits option").filter(":selected").parent("optgroup").prop('disabled', true);
  });
  </code></pre>
  
  <p>Jsbin Link 
  <a href="http://jsbin.com/OxIveXI/1/watch?html,js,output" rel="nofollow">jsbin</a></p>
  
  <p>above code disables all options from particular optgroup , i want that selected option should not be disabled .</p>