CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
Sandip Pingle
Sandip Pingle

Reputation: 665

Disable unselected options from optgroup in mulitiselect dropdown using jquery

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

    <option selected="selected" label="All" value="">All</option>
<optgroup label="fruits" class="fruit">
    <option label="apple" value="1">Apple</option>
    <option label="pear" value="2">Pear</option>
    <option label="orange" value="3">Orange</option>
</optgroup>
<optgroup label="berries" class="berries">
    <option label="strawberry" value="4">Strawberry</option>
    <option label="raspberry" value="5">Raspberry</option>
    <option label="blueberry" value="6">Blueberry</option>
</optgroup>

Javascript: 

$("#fruits").change(function () {
    $("#fruits option").filter(":selected").parent("optgroup").prop('disabled', true);
});

Jsbin Link jsbin

above code disables all options from particular optgroup , i want that selected option should not be disabled .

Upvotes: 2

Views: 2152

Answers (1)

musicnothing
musicnothing

Reputation: 3985

JS Bin

Instead of doing this:

.parent('optgroup')

Do this:

.siblings('option')

Upvotes: 1

Related Questions