驗證組複選框

Question

我有幾組複選框。每個組都包含在一個字段集內的div中。

該div有類chk_div應用於它。我希望能夠限制用戶可以選擇的複選框的數量3.我有一個這樣做的功能，它可以工作，如果我給每個複選框一個唯一的ID並引用它。

但是我希望能夠通過chk_div類來完成。所以我可以擁有任意數量的複選框，而且只需要執行一次jQuery。

下面是每個複選框使用唯一標識的代碼。 - 容器將是一個div ID。

function CheckboxCount(container,maximum) 
{//Counts all the checked checkboxes in the given container and once the maximum number of boxes are checked it disables all the rest 

    var Checked = ($(container +' :checkbox:checked').length); //Get the number of checkboxes in this container that are checked 

    //If the maximum number of checkboxes in the given container have been checked we disable the unchecked ones until the number of checked is lower than max 
    if (Checked >= maximum){$(container +' :checkbox:not(:checked)').attr("disabled",true);} //Disable all non checked check boxes 
    else{$(container +' :checkbox').attr("disabled",false);} //Enable all checkboxes 
} 

這個功能是通過代碼，如

$('#group1').click(function(){CheckboxCount('#group1',3);}); 
$('#group2').click(function(){CheckboxCount('#group2',3);}); 

其中1組觸發的，第2組是包含複選框的div的ID。

我要的是更多的東西像這樣

function test(container,maximum) 
{ 
    $(container +' :checkbox').click(function(){ 

    var Checked = ($(container+' :checkbox:checked').length); 

    if (Checked >= maximum){$(container +' :checkbox:not(:checked)').prop("disabled",true);} 
    else{$(container +' :checkbox').prop("disabled",false);} //Enable all checkboxes} 

    }); 
} 

當容器是一個類，你可以看到的。點擊事件處理進入裏面的功能。唯一的問題是，無論複選框屬於哪個組，它都適用於所有組。

所以，如果我在一個組中，單擊三個複選框，還會禁用第2組

這裏的的jsfiddle所以你可以明白我的意思。 - http://jsfiddle.net/jSgp9/

Answer 1

我會簡化它到這個jsFiddle example。

$('.chk_div input').click(function() { 
    if ($(this).parents('.chk_div').find('input:checked').length >= 3) { 
     $(this).parents('.chk_div').find(':checkbox:not(:checked)').prop("disabled", true); 
    } 
    else { 
     $(this).parents('.chk_div').find(':checkbox').prop("disabled", false); 
    } 
});​ 

Answer 2

使用這與.closest（）和.find（）保持相對於正在修改的複選框組事件。

http://jsfiddle.net/jSgp9/12/

$(container +' :checkbox').click(function() { 

    var Checked = ($(this).closest(container).find('input:checked').length); 

    if (Checked >= maximum) { 
     $(this).closest(container).find('input:not(:checked)').prop("disabled",true); 
    } 
    else { 
     $(this).closest(container).find('input:checkbox').prop("disabled",false); 
    } //Enable all checkboxes} 

});