当计数超过最大限制时，取消选中第一个选中的CheckBox

Question

我有一个CheckBoxList ，我的要求是允许用户最多选择三个选项（通过Javascript），并且，当他单击第四个选项时，第一个选定的CheckBox将被取消选中，类似地，当他选择第五个（另一个）时，即CheckBox第二个被选中，未被选中，依此类推。 最终，用户只剩下三个选择的选项。

例如。 在给定的图像中，如果用户选择.Net（第一），Java（第二），PHP（第三），并且当他选择SQL（第四）时，.Net将被取消选中，SQL将被选中。 此外，当他选择“云计算”（第五）时，Java未被选中。

在此处输入图片说明

我编写了以下Javascript，该Javascript在第一种情况下运行良好，并且在选择第四个条件时cbArray[counter - 4]选中第一个选定的项，但是由于counter值再次达到4且cbArray[counter - 4]再次尝试执行，因此无法继续工作取消选中第一个框而不是第二个框。 如何解决这个问题。 谢谢。

我的Javascript：

<script type="text/javascript" language="javascript">
        function limitChecked(maxCount) {
            debugger;
            var ocbList = document.getElementById('cbList');
            var cbArray = ocbList.getElementsByTagName('input');
            var counter = 0;
            for (var i = 0; i < cbArray.length; i++) {
                if (cbArray[i].checked==true) {
                    counter++;
                    if (counter > maxCount) {
                           cbArray[counter - 4].checked = false;
                    }
                }
            }
        }
</script>

.aspx代码：

<body>
    <form id="form1" runat="server">
    <div>
        Courses:
        <asp:CheckBoxList ID="cbList" runat="server" onclick="limitChecked(3)">
            <asp:ListItem>.Net</asp:ListItem>
            <asp:ListItem>Java</asp:ListItem>
            <asp:ListItem>PHP</asp:ListItem>
            <asp:ListItem>SQL</asp:ListItem>
            <asp:ListItem>Cloud Computing</asp:ListItem>
        </asp:CheckBoxList>
    </div>
    </form>
</body>

Answer 1

根据Trendy的建议（McGarnagle的回答也有所帮助），我想出了这个解决方案，对我来说很好用。

function limitChecked(maxCount) {
            debugger;
            var ocbList = document.getElementById('cbList');
            var cbArray = ocbList.getElementsByTagName('input');
            var checkedArray = [];
            for (var i = 0; i < cbArray.length; i++) {
                if (cbArray[i].checked == true) {
                    checkedArray.push(i);
                    if (checkedArray.length > maxCount) {
                        checkedArray = checkedArray.slice(0);
                        cbArray[checkedArray[0]].checked = false;
                    }
                }
            }
        }

Answer 2

您可以使用推/弹出而不是计数器。 使用slice(0)允许您使用类似于FIFO队列的数组：

function limitChecked(maxCount) {
        debugger;
        var ocbList = document.getElementById('cbList');
        var cbArray = ocbList.getElementsByTagName('input');
        var checked = [];
        for (var i = 0; i < cbArray.length; i++) {
            if (cbArray[i].checked==true) {
                checked.push(i);
                if (checked.length > maxCount) {
                    cbArray[checked[0]].checked = false;
                    checked = checked.slice(1);
                }
            }
        }
    }

当计数超过最大限制时，取消选中第一个选中的CheckBox

问题描述

2 个解决方案

解决方案1
2 2013-07-27 00:59:09

解决方案2
1 2013-07-26 23:14:03

当计数超过最大限制时，取消选中第一个选中的CheckBox

问题描述

2 个解决方案

解决方案1 2 2013-07-27 00:59:09

解决方案2 1 2013-07-26 23:14:03

解决方案1
2 2013-07-27 00:59:09

解决方案2
1 2013-07-26 23:14:03