Reputation: 969

Maximum checked allow in CheckBoxList

I have generated a CheckBoxList which has more than one item using C#. Now I want to set a maximum number of checked item allowed in CheckBoxList. If user check more than maximum allowed item, there will be an alert or the other item will automatic uncheck to prevent user check over maximum number of item allowed.

The maximum number of checked item will be set up to ChecokBoxList in code-behind (C#) or using javascript do this, but the javascript is also should be generated in C# too.

I need some help to solve this issue.

Example Code:

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;

After generated in code-behind, the CheckBoxList will only allow user to check only three items. If user check more than three item, other item will automatic uncheck or at least an alert will show to prevent user check more than three items.

Upvotes: 0

Answers (4)

Jefferson Teixeira

Reputation: 1

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");

        }
    }

Upvotes: 0

Tri Nguyen Dung

Reputation: 969

First of all, I am thank you to Jeremy Thompson. He gave me a good idea for my issue. A little bit change and I have what I want. Solve my issue only using 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>

The javascript will automatic recognize what control is going to call it, and it also get the maximum check item via attribute CssClass of control. By doing this, I also prevent user check more than maximum item in CheckBoxList without doing some post-back.

Upvotes: 0

Jeremy Thompson

Reputation: 65712

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

or like:

ListBox1.GetSelectedIndices().Length

In 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>

Upvotes: 1

Tri Nguyen Dung

Reputation: 969

I have a good solution for this issue:

In C# I will generate a CheckBoxList with 5 items using this code:

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);

As you can see, the CheckBoxList has 5 item and the maximum checked item is seted via CssClass attribute of CheckBoxList, assumed there will be no CssClass needed in CheckBoxList. So that I will set the maximum checked item via this attribute to make it more clear. The key here is to add an EventHandler on CheckboxList, so that if user going to check more than the maximum item, other item will be disable.

The EventHander will be written as follow:

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 Event will check if the checkboxlist has over limit item checked it will disable other items, else it will reenable other item.

Upvotes: 1

Maximum checked allow in CheckBoxList

Answers (4)

Related Questions