1
背景/目前的jQuery/JS防止重複複選框出現使用多選控件
我使用正在從一個JavaScript文件填充埃裏克·海因茲jQuery的多選的Widget。在我的小提琴中，用戶只能在兩個小工具之間檢查2個選項。一旦用戶選擇了一個選項，如果相應的Main被選中，則一個帶有值的動態複選框被附加到Main。用戶也能夠首先檢查Main或一個選項，並且仍然動態地顯示在相應的Main下。
問題如果在已檢查的Main1下已經添加了Option1，則檢查Main2也會向Main1添加一個副本。請看我的小提琴如何工作和問題，我試圖解決。 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>');
});
}
}
});
});