3

我有几组复选框。每个组都包含在字段集中的 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 事件处理程序进入函数内部。唯一的问题是它适用于所有组，无论复选框属于哪个组。

因此，如果我单击第一组中的三个复选框，它也会禁用第二组中的复选框

这是 jsFiddle，所以你可以明白我的意思。- http://jsfiddle.net/jSgp9/

4

2 回答 2

3

我会将其简化为这个jsFiddle 示例。

$('.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);
    }
});​
于 2012-12-21T18:15:23.007 回答
1

将此与.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}

});
于 2012-12-21T18:42:53.117 回答