javascript - jQuery/js 使用多选小部件防止重复复选框出现

Question

背景/当前

我正在使用 Eric Hynds jQuery MultiSelect Widget，它是从 javascript 文件填充的。在我的 fiddle 中，用户只允许检查两个小部件之间的 2 个选项。一旦用户选择了一个选项，如果选中了相应的 Main，则带有值的动态复选框将附加到 Main。用户还可以先检查 Main 或选项，并且仍然动态显示在相应的 Main 下。

问题 如果 Option1 已添加到已选中的 Main1 下，则选中 Main2 也会向 Main1 添加重复项。请查看我的 fiddle 如何工作以及我正在尝试解决的问题。 http://jsfiddle.net/3u7Xj/94/

$(document).ready(function() {
    $(".multiselect").multiselect({
        header: "Choose up to 5 areas total",
        click: function (event, ui) {
             var number1=$("#MDCselect").children(":checked").length,
                number2=$("#Clinicalselect").children(":checked").length;

            if (ui.checked && ((number1 + number2 >=2) || $(this).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^=id]:checked").each(function(){
                    $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
                });
            }
            else {
                $("[id^=id]:checked").each(function(){
                    $(this).nextAll('.holder:first').find('#' + lbl).parent().remove();
                })
            }
        },
        selectedList:5
    });
    $(".checkers").click(function() {        
        if(!$(this).is(':checked')) {
            $(this).nextAll('.holder:eq(0)').find('div input').parent().remove();
        }
        else {
            var checkedOnes = $('#MDCselect').nextAll('.ui-multiselect-menu').find('ul li input:checked');
            for(var i = 0; i < checkedOnes.length; i++) {
                var lbl = checkedOnes.eq(i).attr('value');
                var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
                $("[id^=id]:checked").each(function(){
                    $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
                });
            }
        }
    });
});

Answer 1

这是您需要的吗？

$(".holder").html(""); // Added to line #31

http://jsfiddle.net/ergec/b2CsB/