jquery - 在多选中选择其他选项时禁用一个选项

Question

我在 html 中有一个多选，如下所示。我试图在选择所有类型时禁用所有选项，并在选择任何其他（一个或多个）选项时禁用所有类型。加载页面时，默认选择所有类型选项，用户可以稍后更改。html 看起来像：

<select multiple="multiple" class="multiselect">
    <option value="default" selected="selected">All Types</option>
    <option value="Mobile">Mobile</option>
    <option value="Laptop">Laptop</option>
    <option value="Desktop">Desktop</option>
</select>    

和 Jquery 一样：

$(".multiselect").multiselect({
    buttonWidth: '150px',
    onChange:function(){
     /*some code needed here*/
    }
}); 

选择“所有类型”时，结果应为['Mobile','Laptop','Desktop']或['default']，如果选择了任何其他选项（一个或多个），则该值在数组中。我在禁用 UI 上的选项时遇到了一些问题。期待解决这个问题的解决方案。提前致谢 ：）

Answer 1

条件是“如果选择了”默认值“”：

if($(this).val() == "default")

之后，您只需要禁用或启用选项，您可以通过普通的 jQuery 来完成。

$("option[value='Mobile']").prop("disabled", true);

Answer 2

尝试使用以下更改事件

$('select').on('change',function(){
$(this).find('option').prop("disabled", false);//enable all
if($(this).find('option:selected').is('option[value="default"]')) {}
  $(this).find('option:not(":selected")').prop("disabled", true);
})

Answer 3

为 madalinivacsu 的回应。

如果您使用 selected-pluggin 不要忘记添加触发器：

$('[name=option_element]').on('change', function () {
        $(this).find('option').prop("disabled",false).trigger('chosen:updated');//enable all
        if ($(this).find('option:selected').is('option[value="option_default"]')) {
            $(this).find('option:not(":selected")').prop("disabled", true).trigger('chosen:updated');
        }
    });