Question

我正在使用Eric Hynds jQuery MultiSelect Widget。我实际上使用了两个单独的小部件，当选中时，如果选中“Main”复选框，则会创建一个动态复选框，其值附加到相应的“Main”复选框。请在里面查看我的小提示，以说明我的问题：http://jsfiddle.net/3u7Xj/52/

如何将2个小部件分开显示在相应的部分中，并且仍然只允许用户从中选择2个？

$(document).ready(function() {
    $(".multiselect").multiselect({
        header: "Choose up to 5 areas total",
        click: function (event, ui) {

            if (ui.checked && $(".multiselect").children(":checked").length >= 2) {
                return false;
            }

            var lbl = ui.value;
            if(ui.checked){
                var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
                });
            }
            else {
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').find('div input[id="'+lbl+'"]').parent().remove();
                });
            }

        },
        selectedList:5
    });
});

Answer 1

所以我修改了条件并且它可以正常工作，我希望它适合你。

var number1=$("#dropdown1").children(":checked").length,
    number2=$("#dropdown2").children(":checked").length;

if (ui.checked && ((number1 + number2 >=4) || $(this).children(":checked").length >= 2)){
    return false;
}

Demo here

如果您只想两个选择并修改条件，如下所示：

var number1=$("#dropdown1").children(":checked").length,
    number2=$("#dropdown2").children(":checked").length;

if (ui.checked && ((number1 + number2 >=2) || $(this).children(":checked").length >= 2)){
    return false;
}

Demo here

根据评论中的要求

插入div的各个段。调整后的控制功能单击

为：

$(this).parent("div").find("[id^=Main]:checked").each(function(){
      $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
});

Demo here

jQuery / js分隔2个下拉值

1 个答案: