Disable all options from a chosen multiselect dropdown when a particular option is selected

Question

<script>
    function disableSelectedValues() {
        var cssOptions = [];
        $(".input_field.criteria_countries option").removeAttr("disabled");
        $.each($(".input_field.criteria_countries"), function(index, select) {
            cssOptions = [];
            var values = $(select).val();
            if (values) {
                for (var i = 0; i < values.length; i++) {
                    cssOptions.push("option[value=" + values[i] + "]");
                }
            }

            if (cssOptions.length) {
                console.log(".input_field.criteria_countries " + cssOptions.join(",.input_field.criteria_countries "));
                // disable all options with the selected values
                $(".input_field.criteria_countries " + cssOptions.join(",.input_field.criteria_countries ")).attr("disabled", true);

                // enable all options with the selected values for the current select
                $(select).find(cssOptions.join()).removeAttr("disabled");
            }
        });
    }

    function add_mitigator() {
        var option = '';
        var delete_pop_up = '';

        var tot_risk = $("#total_risk").val();
        var max_risk = $("#max_risk_id").val();
        var increased_risk = parseInt(parseInt(max_risk) + 1);
        var total_risk = parseInt(parseInt(tot_risk) + 1);

        for (i = 1; i < 10; i++) {
            option += "<option value=" + i + ">" + i + "</option>";
        }

        var risk_div = $("<div id='risk_" + increased_risk + "' style='margin-top: 5px;'></div>");

        var risk_drp_cont = $("<div id='risk_drp_cont" + increased_risk + "' style='float:left; width:302px; position:relative;'></div>");
        var risk_drop = $('<select />', {
            'id': 'risk_mitigator_offer_' + increased_risk,
                'name': 'risk_mitigator_offer[]',
                'class': 'input_field criteria_countries',
                'multiple': true,
                'style': 'width:202px;'
        });

        $(risk_drop).append(option);
        $(risk_drp_cont).append(risk_drop);

        $("#total_risk").val(total_risk);
        $("#max_risk_id").val(increased_risk);

        var risk_wgt_cont = $("<div id='risk_wgt_cont" + increased_risk + "' style='float:left;width:45px; position:relative; margin-left:5px;'></div>");
        var risk_weight = $('<input />', {
            'id': 'risk_weight_' + increased_risk,
                'name': 'risk_weight[]',
                'type': 'text',
                'class': 'input_field',
                'style': 'color:#777777; width: 40px; mergin-left: 30px;'
        });
        $(risk_wgt_cont).append(risk_weight);
        $(risk_weight).val('0');

        $(risk_div).append(risk_drp_cont).append(risk_wgt_cont);
        $(risk_drop).chosen({
            no_results_text: "Oops, nothing found!"
        }).change(function() {
            disableSelectedValues();
            $(".input_field.criteria_countries").trigger("chosen:updated");
        });

        var clear_div = $("<div style='clear: both;'></div>");
        $("#mitigator_container").append(risk_div).append(clear_div);
        $("#risk_mitigator_offer_" + increased_risk + "_chosen").css({
            "width": "100%",
                "height": "30px",
                "border-radius": "2px"
        });

        disableSelectedValues();
        $(".input_field.criteria_countries").trigger("chosen:updated");
    }
</script>
<input id="total_risk" name="total_risk" type="text" value="1" />
<input id="max_risk_id" name="max_risk_i" type="text" value="1" />
<a class="btn blue_button" href="javascript:void(0)" onclick="add_mitigator();">Add Mitigator</a>

<div id="mitigator_container" style="height:auto;">
    <div id="risk_1">
        <div id="risk_drp_cont_1" style="float:left;">
            <select id="risk_mitigator_offer_1" name="risk_mitigator_offer[]" class="input_field criteria_countries" style="width:302px;" multiple="multiple">
                <option value="All">All</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
            </select>
        </div>
        <div id="risk_wgt_cont_1" style="float:left;width:45px; position:relative; margin-left:5px;">
            <input id="risk_weight_1" name="risk_weight[]" class="input_field" type="text" value="0" style="color:#777777; width: 40px;" maxlength="3" />
        </div>
        <div id="risk_del_cont_1" style="float:left; width:20px; position:relative; margin-top:5px"> <a onclick="" href="javascript:void(0);" id="delete_mitigator"><span class="glyphicon glyphicon-trash trash"></span></a>

        </div>
    </div>
    <div style="clear:both"></div>
</div>

Example Fiddle

Description of Requirement:

1. I have a multi-select dropdown using chosen plugin.
2. The first option is "All"
3. Those who are accustomed with chosen dropdown,they know that when an option is selected(from chosen multiselect) and presented in the dropdown textarea-like field, you will see it disabled from the list menu automatically.
4. I want that, when the first option "All" will be selected, then all the other options from the list menu will be also disabled.
5. When the "All" option will be removed from the dropdown textarea-like field(deleting by clicking on the cross with the selected option), then again all the options will be enabled.

Answer 1

$(document).ready(function () {
    $("#foobar").chosen().on('chosen:showing_dropdown',function() {
            $('.chosen-select').attr('disabled', true).trigger('chosen:updated');
            $('.chosen-select').attr('disabled', false).trigger('chosen:updated');
            $('.search-choice-close').hide();
    });
    $('.search-choice-close').hide();
});

Answer 2

Answer

$(document).ready(function(){
    $('.chosen-select').chosen({});

    $('.chosen-select').on('change', function(evt, params) {
       var $s = $(this);

        if (params.selected && params.selected == "Any") 
        {
            // disable the select
            $s.children('option').not(':selected').each(function(){
            $(this).attr('disabled','disabled');
            });
        }
        else if (params.deselected && params.deselected == "Any") 
        {
            // enable back
            $s.children('option').each(function(){
                $(this).removeAttr('disabled');
            });
        }
        // force chosen update
        $('.chosen-select').trigger('chosen:updated');
    }); 
});