选择插件 - 删除特定选项的“x”按钮（删除选项） after.trigger("chosen:updated")

Question

Using: jQuery 3.5.1

Basically I have multiple DDLists, rendered by server(ASP MVC app) with selected=true or false options, that I attach chosen to them, the selected options (that are rendered by server) should not be removed so I removed "x" button from them. What I want now is this:

• When I choose an option from one of these DDLs, I want that option to not be available for rest of DDLs, and if I remove it -> to be available again for all DDLs -> this I already managed to get to work (with the code below) by using .trigger("chosen:updated")
• Doing .trigger("chosen:updated") , updates all my DDLs, which implicit add "x" button to all selected options
• Now what I need is a way of prevent adding "x" button to those options that were initially rendered by server -> I've tried to save them in search_choices but at that moment they doesn't contain "x" button and after .trigger("chosen:updated") , DOM is changed and search_choices contains an old version of those elements.

There was a solution that is deprecated now by using ".selector" -> which gives you a updated version of DOM elements

How can I overcome this issue? Thanks in advance!

   var search_choices = $("#MyFieldset").find(".search-choice");

   $("#step_5").on("change", ".ChosenDDLs", function (ev, crtSelectedOptionVal) {
    
    var all_ChosenDDLs = $(".ChosenDDLs");

    if (crtSelectedOptionVal.deselected) {
        all_ChosenDDLs .not(this).each(function (index, elem) {
            $(elem).children("option[value=" + crtSelectedOptionVal.deselected + "]")
                   .prop("disabled", false)
                   .trigger("chosen:updated");
        });
    }
    else if (crtSelectedOptionVal.selected) {
        all_ChosenDDLs .not(this).each(function (index, elem) {
            $(elem).children("option[value=" + crtSelectedOptionVal.selected + "]")
                   .prop("disabled", true)
                   .trigger("chosen:updated");
        });
    }

///search_choices here does not contain updated DOM elemets, so code below doesn't work
    if (search_choices.length > 0) {
        search_choices.each(function (index, elem) {
            $(this).find(".search-choice-close").remove();
        });
    }        
});

Answer 1

So what I actually did was to render those options as disabled (from server), so no "x" button was attached to them, and also force jQuery validation to not ignore disabled options: :disabled:not(option)

$("#form").data("validator").settings.ignore = ":disabled:not(option)";

Also with chosen you need to not ignore hidden select , so validation can work (after reparsing Validation: $.validator.unobtrusive.parse($("#form")) )

$("#form").data("validator").settings.ignore = ":hidden:not(" + selectClassnameToIgnore +")";