Question

我尝试使用JS将每个表行的选定checbox限制为3。每行都有一个单独的复选框和5个级别，只能选择2个，如：

<tr>
    <td>
        <input type="checkbox" name="indicator[]">
    </td>
    <td>
        <input type="checkbox" name="graduations[]">
    </td>
    <td>
        <input type="checkbox" name="graduations[]">
    </td>
    <td>
        <input type="checkbox" name="graduations[]">
    </td>
    <td>
        <input type="checkbox" name="graduations[]">
    </td>
    <td>
        <input type="checkbox" name="graduations[]">
    </td>
</tr>

实际代码如http://www.javascriptkit.com/script/script2/checkboxlimit.shtml所示：

function checkboxlimit(checkgroup, limit){
    var checkgroup=checkgroup
    var limit=limit
    for (var i=0; i<checkgroup.length; i++){
        checkgroup[i].onclick=function(){
        var checkedcount=0
        for (var i=0; i<checkgroup.length;checkedcount+=(checkgroup[i].checked)? 1 : 0
            if (checkedcount>limit){
                alert("You can only select a maximum of "+limit+" checkboxes")
            this.checked=false
            }
        }
    }
}

我只能限制整张桌子。有一个简单的方法吗？

Answer 1

如果您有权访问jquery，可以使用parent().siblings()将已选中复选框的数量限制为每行2个

$(function() {
    $('input[name=graduations\\[\\]]').click(function(){
        if($(this).parent().siblings().children("input[name=graduations\\[\\]]:checkbox:checked").length >= 2)
            this.checked = false;
    });
});

http://jsfiddle.net/p2dLu2mu/

限制每个表行的复选框选择

1 个答案: