在多选

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*/
    }
}); 

选择“所有类型”时，结果应为 ['移动'，'笔记本电脑'，'桌面'] 或 ['默认'] ，如果有的话选择其他选项（一个或多个）然后选择该数组中的值。我在禁用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');
        }
    });