CODEWITHSUNDEEP
javascriptjqueryjquery-select2
Mojo
Mojo

Reputation: 306

select2 is not updated after disable of selected option

I'm trying to disable the selected option in select2 but it seems like the select2 is not refreshing.

My purpose is to disable each item in the select2 list after selecting it. I see the HTML that the option got the disabled attribute but the option is still enabled in the select2 element.

$("#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");
});

See example : https://jsfiddle.net/bkqeqbay/1/

Upvotes: 1

Views: 839

Answers (1)

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

You can use the select event and the data like so:

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

Updated fiddle: https://jsfiddle.net/bkqeqbay/4/

Note that if you must also disable the underlying select element option you can do:

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

Upvotes: 2

Related Questions