select2没有更新后禁用选定的选项

Question

我试图禁用select2中选定的选项，但它似乎像select2不刷新。

我的目的是在选择它后禁用select2列表中的每个项目。我看到HTML表示该选项具有禁用属性，但该选项在select2元素中仍处于启用状态。

$("#select-filter").select2({ 
    placeholder: "Select a category", 
    data:[{ 
     id: "", 
     text: "" 
    },{ 
     id: "project", 
     text: "project" 
    },{ 
     id: "date", 
     text: "date" 
    },{ 
     id: "user", 
     text: "user" 
    }] 
}).on("change", function(e) { 
    $("#select-filter :selected").attr("disabled", "true"); 
}); 

见例如：https://jsfiddle.net/bkqeqbay/1/

Answer 1

可以使用select事件，并像这样的数据：

...}).on("select2:select", function(e) { 
    console.dir(e.params.data); 
    e.params.data.disabled = true; 
}); 

更新小提琴：https://jsfiddle.net/bkqeqbay/4/

请注意，如果您还必须禁用您可以执行的基本选择元素选项：

var index = $(e.params.data.element).index(); 
$("#select-filter").find('option').eq(index).prop('disabled',true);