如何在javascript中的gridview中限制复选框选择列和行答案

【问题标题】：How to limit the checkbox selection both columnwise and rowwise in gridview in javascript如何在javascript中的gridview中限制复选框选择列和行
【发布时间】：2015-06-12 06:26:12
【问题描述】：

我有一个带有 5 行和 6 列复选框的网格视图。我的要求是我可以逐行选择 3 个复选框，并且在整个网格中我一次可以选择总共 6 个复选框。我已尝试以下代码，但无法正常工作

    function IdExists(elements, id) {
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].id.indexOf(id) > -1) {
                return true;
            }
        }
        return false;
    }

    function Check_Click(chkBx) {
        var c = 0;
        Parent = document.getElementById('<% =Gv1.ClientID %>');          
        for (i = 0; i < Parent.rows.length; i++) {
            if (items[i].checked) {
                c = c + 1;
            }

            var row = Parent.rows[i];
            var items = row.getElementsByTagName('input');

            if (items.length > 0) {
                if (IdExists(items, chkBx.id)) {
                    var tot = 0,cc=0;

                    for (j = 0; j < items.length; j++)
                    {

                        if (items[j].type == 'checkbox' && items[j].checked && items[j].disabled == false)
                        {

                            tot = tot + 1;
                            if ((tot > 3)&&(c>0))
                            {
                                alert('Cannot take more than 3 hours');
                                chkBx.checked = false;
                                return;
                            }
                        }

                    }
                }
            }
        }



    }
</script>

【问题讨论】：

您在此处收到任何错误？
没有得到任何错误。它单独检查行，即如果我单击连续 3 复选框，它会显示弹出窗口

标签： javascript jquery gridview

【解决方案1】：

使用 jQuery，您可以用更少的代码实现结果。只需给所有复选框一个 CssClass，例如 mycheckbox

$(".mycheckbox").on("click", function(){
    var elm = this, $elm = $(elm);
    if(elm.checked){
        var totalCheckedBoxes = $(".mycheckbox:checked").length;
        var rowWiseCheckedBoxes = $elm.closest('tr').find(".mycheckbox:checked").length;
        if(totalCheckedBoxes === 6 || rowWiseCheckedBoxes === 3){
            elm.checked = false;
            if(totalCheckedBoxes === 6){
                alert("Cannot select more than 6");
            }
            else{
                alert("Cannot take more than 3 hours");
            }
        }
    }
});

【讨论】：