CheckBoxList 中的最大选中允许值答案

【问题标题】：Maximum checked allow in CheckBoxListCheckBoxList 中的最大选中允许值
【发布时间】：2013-03-03 03:06:10
【问题描述】：

我使用 C# 生成了一个包含多个项目的 CheckBoxList。现在我想设置 CheckBoxList 中允许的最大检查项目数。如果用户检查的项目超过了允许的最大数量，则会发出警报或其他项目将自动取消选中，以防止用户检查超过允许的最大项目数。

检查项目的最大数量将在代码隐藏（C#）中设置为 ChecokBoxList 或使用 javascript 执行此操作，但 javascript 也应在 C# 中生成。

我需要一些帮助来解决这个问题。

示例代码：

CheckBoxList chkl = new CheckBoxList();
string[] items = {"item1", "item2", "item3", "item4", "item5"};
foreach (string item in items )
            {
                chkl.Items.Add(new ListItem(item));
            }
chkl.MaximumCheck = 3;

在代码隐藏中生成后，CheckBoxList 将只允许用户检查三个项目。如果用户选中了三个以上的项目，其他项目将自动取消选中，或者至少会显示一个警告以防止用户选中三个以上的项目。

【问题讨论】：

如果尝试检查第四个项目，将向用户显示他们无法进行更多检查的警报，或者因为该项目被禁用而无法进行第四次检查。
如果每当用户检查复选框列表上的任何项目时，我将尝试使用回发在 C# 中编写代码来执行此操作。稍后我将向您展示以获取有关我的问题的进一步帮助。

标签： c# javascript asp.net

【解决方案1】：

我对这个问题有一个很好的解决方案：

在 C# 中，我将使用以下代码生成一个包含 5 个项目的 CheckBoxList：

CheckBoxList chkl = new CheckBoxList();
    string[] items = { "item1", "item2", "item3", "item4", "item5" };
    foreach (string item in items)
    {
        chkl.Items.Add(new ListItem(item));
    }
    chkl.AutoPostBack = true;
    chkl.CssClass = "3";
    chkl.SelectedIndexChanged += new EventHandler(BoxChecked);

如您所见，CheckBoxList 有 5 个项目，最大检查项目是通过 CheckBoxList 的 CssClass 属性设置的，假设 CheckBoxList 中不需要 CssClass。所以我会通过这个属性设置最大检查项，以使其更加清晰。这里的关键是在 CheckboxList 上添加一个 EventHandler，这样如果用户要检查的项超过最大项，其他项将被禁用。

EventHander 的写法如下：

protected void BoxChecked(object sender, EventArgs e)
{
    try
    {
        int maximumCheck = -1;
        CheckBoxList CheckExpertiseList = (CheckBoxList)sender;
        try {
            maximumCheck = Convert.ToInt32(CheckExpertiseList.CssClass);
        }
        catch { }
        if (maximumCheck > -1)
        {
            if (CheckExpertiseList.Items.Cast<ListItem>().Where(i => (i.Selected == true)).Count() == maximumCheck)
            {
                CheckExpertiseList.Items.Cast<ListItem>().Where(i => (i.Selected == false)).ToList().ConvertAll(i => i.Enabled = false).ToList();
            }
            else if (CheckExpertiseList.Items.Cast<ListItem>().Where(i => (i.Selected == true)).Count() == maximumCheck - 1)
                CheckExpertiseList.Items.Cast<ListItem>().Where(i => (i.Selected == false)).ToList().ConvertAll(i => i.Enabled = true).ToList();
        }
    }
    catch { }
}

EventHandler 事件将检查复选框列表是否有超过限制的项目被检查它将禁用其他项目，否则它将重新启用其他项目。

【讨论】：

【解决方案2】：

int x = 0;
foreach (var li in ListBox1.Items) {
 if (li.Selected == true)
 {
  x = x + 1;
 }

或喜欢：

ListBox1.GetSelectedIndices().Length

在 Javascript 中：

<script type="text/javascript" language="javascript">
function CheckCheck()
{
    var chkBoxList=document.getElementById('<%=CheckBoxList1.ClientID %>');        var chkBoxCount=chkBoxList.getElementsByTagName("input");

     var btn=document.getElementById('<%=btnSubmit.ClientID %>');
     var i=0;
     var tot=0;
     for(i=0;i<chkBoxCount.length;i++)
     {
      if(chkBoxCount[i].checked)
      {
       tot=tot+1;
      }
     }

if(tot > 3)
{
   alert('Cannot check more than 3 check boxes');              
}    
</script>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" onclick="javascript:CheckCheck();">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
<asp:ListItem>Four</asp:ListItem>
<asp:ListItem>Five</asp:ListItem>
</asp:CheckBoxList>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>

【讨论】：

这是我想要的，因为不需要在选中后执行回发事件。但是有些事情错过了我的目标，动态控件有很多不同的 ID，javascript 如何识别哪个 checkbolist 将调用它？如果他们调用它，它如何知道任何单个复选框列表的最大检查属性？
我自己的答案已经解决了这个问题，但它需要一个回发事件。这就是我要避免的，因为我正在向更新面板添加动态控制。所以任何回发都可以破坏aspx页面的当前视图状态。

【解决方案3】：

首先，我要感谢杰里米·汤普森。他给了我一个关于我的问题的好主意。一点点改变，我就有了我想要的。仅使用 javascript 解决我的问题。

<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript" language="javascript">
    function CheckCheck() {
        var chkBoxCount = this.getElementsByTagName("input");
        var max = parseInt(this.className);
        var i = 0;
        var tot = 0;
        for (i = 0; i < chkBoxCount.length; i++) {
            if (chkBoxCount[i].checked) {
                tot = tot + 1;
            }
        }

        if (tot > max) {
            var k = 0;
            for (i = 0; i < chkBoxCount.length; i++) {
                if (chkBoxCount[i].checked) {
                    k++;
                    if (k > max) {
                        chkBoxCount[i].checked = false;
                        alert('Cannot check more than ' + max + ' check boxes');
                    }
                }
            }               
        }
    }
</script>
<div>
<table>
<tr>
<td>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="3" onclick="javascript:CheckCheck.call(this);">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
<asp:ListItem>Four</asp:ListItem>
<asp:ListItem>Five</asp:ListItem>
</asp:CheckBoxList>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

javascript会自动识别调用它的控件，并且通过控件的属性CssClass获取最大检查项。通过这样做，我还可以防止用户在 CheckBoxList 中检查超过最大项目而不进行一些回发。

【讨论】：

【解决方案4】：

private void cb_magia_SelectedIndexChanged(object sender, EventArgs e)
    {
        int maxNumber = 4;
        int iSelectedIndex = cb_magia.SelectedIndex;
        if (cb_magia.CheckedItems.Count > maxNumber)
        {
           cb_magia.SetItemCheckState(iSelectedIndex, CheckState.Unchecked);
           MessageBox.Show("you had checked the maximum checkbox value allowed");

        }
    }

【讨论】：