javascript - 选择特定选项时，禁用所选多选下拉列表中的所有选项

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

需求说明:

1. 我有一个使用chosen 插件的多选下拉菜单。
2. 第一个选项是“全部”
3. 那些习惯于chosen下拉菜单的人，他们知道当一个选项被选中(来自chosen multiselect)并显示在下拉文本区域-like 字段，您会在列表菜单中看到它自动禁用。
4. 我希望当第一个选项“全部”被选中时，列表菜单中的所有其他选项也将被禁用。
5. 当“所有”选项将从类似下拉文本区域的字段中删除时(通过点击十字与所选选项)，然后所有选项将再次启用。

Answer 1

回答

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