Question

有两组颜色“主要颜色”和“其他颜色” 主要颜色=＆gt;红色，绿色，蓝色，黄色
其余颜色=＆gt;黑色，洋红色，玫瑰色，白色

我已将颜色放在多选下拉列表中：

<select id="multipeColorSelect" multiple size="8">
    <option class="main" value="Red">Red</option>
    <option class="main" value="Green">Green</option>
    <option class="main" value="Blue">Blue</option>
    <option class="main" value="Yellow">Yellow</option>
    <option class="other" value="Black">Black</option>
    <option class="other" value="Magenta">Magenta</option>
    <option class="other" value="Rose">Rose</option>
    <option class="other" value="White">White</option>
</select>

我有2个复选框。

<label>Main colors
    <input type="checkbox" data-class="main" name="colorcheckbox" value="maincolors" />
</label>
<label>Rest of colors
    <input type="checkbox" data-class="other" name="colorcheckbox" value="restofcolors" />
</label>

在下面的代码中，
1）如果选择“主要颜色”组中的任何一种颜色，则将禁用另一个“其余颜色”复选框 2）如果选择“其他颜色”组中的任何一种颜色，则其他“主要颜色”复选框将被禁用。

$('input[name="colorcheckbox"]').click(function () {
    $('#multipeColorSelect option.' + $(this).data("class")).prop('selected', $(this).prop("checked"));
});

$('#multipeColorSelect').change(function () {
    var mainChecked = 0;
    var otherChecked = 0;

    $(this).find("option").each(function() {
        if ($(this).prop("selected")) {
            $(this).hasClass("main") ? mainChecked++ : otherChecked++;
        }        
    });

    $("input[data-class='other']").prop("disabled", mainChecked == 1);
    $("input[data-class='main']").prop("disabled", otherChecked == 1);

    if ($('#multipeColorSelect option[value="Black"]:checked').length > 0 && $('#multipeColorSelect option[value="Blue"]:checked').length) {
        $("input[data-class='other'], input[data-class='main']").prop("disabled", false);
    }

});

抱歉更改： 1）如果选择“红色”和“绿色”或“绿色”和“蓝色”或“蓝色和黄色”，则应取消选中另一个“其余颜色”复选框。 2）如果选择“Black”和“Magenta”或“Magenta”和“Rose”或“Rose and”White“，则应取消选中其他”Main Colors“复选框。

另外，如果jQuery代码可以更好地简化，请告诉我。请帮忙。

jsfiddle：

Answer 1

我使用$ .inArray并将用户选择的颜色值保存在数组中您可以检查JsFiddle，看看我所做的代码是否解决了您的问题。

http://jsfiddle.net/5u63yu8t/5/

$('#multipeColorSelect').change(function () {
       var optClass = [];
       var values = $(this).val();
       $("input[data-class='other'], input[data-class='main']").attr("disabled", false);

       for (var i = 0; i<values.length; i++) {

        optClass.push(($('#multipeColorSelect option[value="'+values[i]+'"]').attr('class')));        
    }

    if ($.inArray("main", optClass) !== -1) {

        $("input[data-class='other']").attr("disabled", true);
    }

    if ($.inArray("other", optClass) !== -1) {    
        $("input[data-class='main']").attr("disabled", true);
    }

    if ($.inArray("Black", values) !== -1 && $.inArray("Yellow", values) !== -1 && values.length === 2) {

        $("input[data-class='other'], input[data-class='main']").attr("disabled", false);    
    }
});

Answer 2

这会解决您的问题吗？

$('input[name="colorcheckbox"]').click(function () {
    $('#multipeColorSelect option.' + $(this).data("class")).prop('selected', $(this).prop("checked"));
});

$('#multipeColorSelect').change(function () {
    var mainChecked = 0;
    var otherChecked = 0;

    $(this).find("option").each(function() {
        if ($(this).prop("selected")) {
            $(this).hasClass("main") ? mainChecked++ : otherChecked++;
        }        
    });

    $("input[data-class='other']").prop("disabled", mainChecked >= 1 && otherChecked === 0);
    $("input[data-class='main']").prop("disabled", otherChecked >= 1 && mainChecked === 0);

    if ($('#multipeColorSelect option[value="Black"]:checked').length > 0 && $('#multipeColorSelect option[value="Blue"]:checked').length) {
        $("input[data-class='other'], input[data-class='main']").prop("disabled", false);
    }
});

jQuery从多选下拉列表中选择元素

2 个答案: