我有一个 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;
}
}
}
}
关于c# - 当计数超过最大限制时，取消选中第一个选中的复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17892323/