javascript - jqueryを使用して、複数選択ドロップダウンのoptgroupから選択されていないオプションを無効にします

Question

私の複数選択には、いくつかの optgroups があります。ユーザーが optgroup から 1 つのオプションのみを選択できるようにしたい。ユーザーが任意の optgroup からいずれかのオプションを選択するとすぐに、他の optgroup ではなく、同じグループの他のすべてのオプションを無効にします。次のコード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')