使用 jquery 在多选下拉列表中禁用 optgroup 中未选择的选项

Question

在我的多选中，我有几个 optgroups 。 我想允许用户从 optgroup 中仅选择一个选项。 一旦用户从任何 optgroup 中选择任何一个选项，我想禁用同一组中的所有其他选项，而不是其他 optgroups 。 我尝试了以下代码 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 链接 jsbin

上面的代码禁用了来自特定 optgroup 的所有选项，我希望不应该禁用所选的选项。

Answer 1

JS Bin

不要这样做：

.parent('optgroup')

这样做：

.siblings('option')