How to fix a user can select only 10 check boxs at run time

Question

0.00/5 (No votes)

See more:

I have a check box list in my page....I need to limit the user can select only within 10 checkboxes...I had use the check boxes as input type of HTML.... How can i do that????

Posted 23-May-13 0:24am

SnvMohan

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 23-May-13 7:50am

Please provide the html mark up code and javaScript what you have tried so far ?

4 solutions

Solution 1

OnChecked -- increment a counter variable
OnUnChecked -- decrement a counter variable

Once you have this in place ..

On check you can validate the count and if count > 10 uncheck it and show a message to the user.

Please share some sample code if you need more hints

Posted 23-May-13 0:28am

tumbledDown2earth

Comments

SnvMohan 23-May-13 6:38am

Thanks for your answer... I need a codes in Javascript ....

Solution 2

write checkbox selection changed event
and
increment the count variable when checkbox.checked is true
and decrement the count variable when checkbox.checked is false.
Hope this helps...!

Posted 23-May-13 0:29am

sameer8k

Comments

SnvMohan 23-May-13 6:38am

Thanks for your answer... I need a codes in Javascript ....

Solution 3

Call function from code behind like this:

XML

string script = "<SCRIPT LANGUAGE='JavaScript'> ";
script += "counter()";
script += "</SCRIPT>";
Page.RegisterClientScriptBlock("ClientScript", script);

In your page's head section add function like this:

C#

<script type="text/javascript">
       function counter() 
        {
           //increment or decrement variable       
                  
        }
    </script>

Put some efforts to increment and decrement according to your needs.

Posted 23-May-13 1:13am

Thanks7872

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Hitesh Gohel · Accepted Answer · 2013-05-23T02:22:00

Solution 4

Hello,
Please use this code as below..

HTML

<input type="checkbox" name="chkName" id="chkName" value="1" />
<input type="checkbox" name="chkName" id="chkName1" value="2" />
<input type="checkbox" name="chkName" id="chkName2" value="3" />
<input type="checkbox" name="chkName" id="chkName3" value="4" />
<input type="checkbox" name="chkName" id="chkName4" value="5" />
<input type="checkbox" name="chkName" id="chkName5" value="6" />
<input type="checkbox" name="chkName" id="chkName6" value="7" />
<input type="checkbox" name="chkName" id="chkName7" value="8" />
<input type="checkbox" name="chkName" id="chkName8" value="9" />
<input type="checkbox" name="chkName" id="chkName9" value="10" />
<input type="checkbox" name="chkName" id="chkName10" value="11" />
<input type="checkbox" name="chkName" id="chkName11" value="12" />
<input type="checkbox" name="chkName" id="chkName12" value="13" />
<input type="button" name="btnSave" value="Save" onclick="return CheckValid();" />

And..

JavaScript

<script type="text/javascript">
    var arIntIds = new Array();
    var counter = 1;
    $(function () {
        $("input[id^='chkName']").change(function () { CheckUnCheckAll(this); });
    });
    function CheckUnCheckAll(chk) {
        if ($(chk).is(':checked')) {
            PushToIntIds(counter);
        }
        else {
            PullFromIntIds(counter);
        }
    }

    function PushToIntIds(counter) {
        arIntIds.push(counter);
        alert("Selected Checkbox Count : " + arIntIds.length);
    }

    function PullFromIntIds(counter) {
        arIntIds.pop(counter);
        alert("Selected Checkbox Count : " + arIntIds.length);
    }

    function CheckValid() {
        if (arIntIds.length >= 10) {
            alert("You can not select more then 10 checkbox!!");
            return;
        }
        else {
            alert('Move on ..');
        }
    }
</script></script>

Posted 23-May-13 2:22am

Hitesh Gohel

Comments

SnvMohan 23-May-13 10:30am

Hello, i have used your codes on my page....But there is a a problem .I had a checkbox with in a datalist....My code here

<asp:DataList ID="LocationDataList" runat="server" RepeatColumns="5"
RepeatDirection="Horizontal">
<itemstyle borderstyle="None">
<itemtemplate>
<table width="150">
<tr><td width="10%"></td><td width="80%">
<input name="LocatIDChkBox" runat="server" type="checkbox" value='<%#Eval("Locat_ID") %>' önclick="return CheckValid();"/>
<asp:Label ID="LocatNamelbl" runat="server" Text='<%# Eval("Locat_Name") %>'></td><td width="10%"></td></tr>
</table>

<td align="center" class="style1" colspan="5">
<asp:Button ID="SubmitBtn" runat="server" Text="Submit" Width="100px"
onclick="SubmitBtn_Click" Visible="False" />
</td>

I can call the checkvalidate function on checkbox click...Because when user try to click 11 checkbox then that fuction want to executed...But its allowed more then 10 boxes its given 'Move on' alert box..........How can i do that?? Please help me?

Hitesh Gohel 23-May-13 10:37am

Hi,
you just add the function CheckValid() in your code on

<asp:Button ID="SubmitBtn" runat="server" Text="Submit" Width="100px" onclick="SubmitBtn_Click" Visible="False" /> this button as OnClientClick="return CheckValid();"

and add checkbox field id also..

SnvMohan 23-May-13 10:40am

I am already do this.......But not usefull

SnvMohan 23-May-13 10:41am

I want to check the selected checkbox less then 10 before click the submit button......

Hitesh Gohel 24-May-13 0:55am

Hi..
Please try this if you didn't get..

<asp:DataList ID="LocationDataList" runat="server" RepeatColumns="5" RepeatDirection="Horizontal">
<HeaderTemplate>
<table width="150">
<tr>
<td width="10%">
</td>
</HeaderTemplate>
<itemtemplate>
<td width="80%">
<input id="chkName" name="LocatIDChkBox" runat="server" type="checkbox" value='<%#Eval("UserId") %>' clientidmode="Static" />
<asp:Label ID="LocatNamelbl" runat="server" Text='<%# Eval("UserName") %>'>
</td>

<footertemplate>
<td width="10%">
</td>
</tr> </table>
<td align="center" class="style1" colspan="5">
<asp:Button ID="SubmitBtn" runat="server" Text="Submit" Width="100px" OnClientClick="return CheckValid();" />
</td>

<script type="text/javascript"> var arIntIds = new Array();
var counter = 1;
$(function () {
$("input[id^='chkName']").change(function () { CheckUnCheckAll(this); });
});
function CheckUnCheckAll(chk) {
if ($(chk).is(':checked')) {
PushToIntIds(counter);
}
else {
PullFromIntIds(counter);
}
}

function PushToIntIds(counter) {
arIntIds.push(counter);
alert("Selected Checkbox Count : " + arIntIds.length);
}

function PullFromIntIds(counter) {
arIntIds.pop(counter);
alert("Selected Checkbox Count : " + arIntIds.length);
}

function CheckValid() {
if (arIntIds.length >= 10) {
alert("You can not select more then 10 checkbox!!");
return;
}
else {
alert('Move on ..');
}
}</script>