Question

我有几组复选框。每个组都包含在一个字段集内的div中。

div已经应用了类chk_div。我希望能够限制用户可以选择的复选框数量3.我有一个功能可以执行此操作，如果我给每个复选框一个唯一的ID并引用它，它就可以工作。

但是我希望能够通过chk_div类来实现。所以我可以拥有尽可能多的复选框组，只需要执行一次jQuery。

以下是为每个复选框使用唯一ID的代码。 - 容器将是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);});

其中group1，group2是包含复选框的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}

    });
}

容器是一个类，并且你可以看到.click事件处理程序进入函数内部。唯一的问题是它适用于所有组，无论该复选框属于哪个组。

因此，如果我点击第一组中的三个复选框，它也会禁用第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（）一起使用，以使事件相对于您正在修改的复选框组。< / p>

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}

});

验证复选框组

2 个答案: