当计数超过最大限制时,取消选中第一个选中的CheckBox - c#

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

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

我写了下面的Javascript,它在第一种情况下工作正常,并且在选择第四个时取消选中第一个选定的项目,但由于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>

参考方案

根据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;
                    }
                }
            }
        }

Asp.net发送信息表单到页面 - c#

我正在尝试使用弹出窗口中的新信息更新旧页面。到目前为止,我尝试过将结果保存在会话中Session["Data"] = DLvrijecampingplaatsen.SelectedItem; 然后当它达到Page_Load时,将其重新加载回旧页面if (Session["Data"] != null) { LBkies…

jQuery和Gridview更新面板不起作用 - c#

我必须按照某些给定条件实现gridview的闪烁:gridview row blinking based on some conditions我能够成功实现它,但是随后我被要求在5秒钟内自动刷新gridview,为此我使用了ajax更新面板和计时器,但随后出现如下新的JavaScript错误:码: <form id="form1" …

将Web用户控件添加到页面时,asp按钮onclick不会触发 - javascript

我正在使用使用Visual Studio模板创建的Web表单应用程序。模板具有一个内容占位符,该占位符被访问的任何页面的内容替换。有问题的页面有几个服务器控件,例如文本框,标签和按钮。当我单击我的更新按钮时,它可以正常工作,这些值会回传并更新数据库。我想在所有子页面上创建通用的登录提示。我的导航栏(位于我的母版页中)具有引导程序设置。我在导航栏中添加了一个下…

与Mootools Scriptmanager Ajax Asp.net发生冲突? - c#

我正在尝试不同的方法来使这项工作成功,但是没有成功。我正在尝试将mootools与asp.net应用程序集成。我只想用它为我的网站添加一些效果。我也使用更新面板,scriptmanager,因为不希望有完整的回发。在控制台上引发错误TypeError:clientID.startsWith不是函数,并且在进行更新时brwoser reset...。这是整个代…

如何获取直放站内的复选框ID - c#

我在其中放置了一个复选框的中继器内,在rapeater上方有一个HTML复选框,用于使用客户端JavaScript在中继器内检查/取消选中一个复选框。这是我的代码:用于检查/取消检查的JavaScript:<script type="text/javascript"> function selectAll() { for (i…