How to limit HTML input type CheckBoxes

Question

1.00/5 (1 vote)

See more:

I had a check boxes in my datalist for dynamically list the location name with checkboxes, when user select the location name i need to pass a id from which one is selected.............But user can select only 10 locations....... How can i limit the selection of user.........

here my aspx code:

HTML

<html>
<head>
<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>
</head>
<body>
<table style="width: 100%">
        <tr>
            <td style="width: 69px">
                 </td>
            <td class="style3">
                <asp:Label ID="Label1" runat="server" Text="Select City">
            </td>
            <td class="style2">
                :</td>
            <td style="width: 347px" colspan="3">
                <asp:DropDownList ID="CityDDL" runat="server" AutoPostBack="True" 
                    DataTextField="City_Name" DataValueField="City_ID" 
                    onselectedindexchanged="CityDDL_SelectedIndexChanged" Width="200px">
                
             </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td class="style4">
                </td>
            <td class="style5">
                </td>
            <td class="style6">
                </td>
            <td colspan="3" class="style7">
                 </td>
            <td class="style8">
                </td>
        </tr>
        <tr>
            <td style="width: 69px">
                 </td>
            <td colspan="5">
                <asp:Panel ID="Panel1" runat="server" BorderColor="#999999" BorderStyle="Solid" 
                    Visible="False">
                    <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="CheckUnCheckAll(LocatIDChkBox);"/>
                        <asp:Label ID="LocatNamelbl" runat="server" Text='<%# Eval("Locat_Name") %>'></td><td width="10%"></td></tr>
                        </table>
                        </itemtemplate>
                    
                    

                
              </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td style="width: 69px">
                 </td>
            <td align="center" class="style1" colspan="5">
                <asp:Button ID="SubmitBtn" runat="server" Text="Submit" Width="100px" 
                    onclick="SubmitBtn_Click" OnClientClick="return CheckValid();" Visible="False" />
            </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td style="width: 69px">
                 </td>
            <td class="style3">
                 </td>
            <td class="style2">
                 </td>
            <td style="width: 188px">
                 </td>
            <td style="width: 347px">
    <asp:HiddenField ID="HiddenField1" runat="server" />

            </td>
            <td style="width: 347px">
                 </td>
            <td>
                 </td>
        </tr>
              
       
         </table>
         </body>
         </html>
        <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            //check all
            $("[id$='chkAll']").click(
             function () {
                 $("INPUT[type='checkbox']").attr('checked', $("[id$='chkAll']").is(':checked'));
             });

            $("[id$='SubmitBtn']").click(function () {
                var ISBN = [];

                $("[id$='LocationDataList'] input[type=checkbox]:checked").each(function () {
                    ISBN.push($(this).val());
                });

                $("[id$='HiddenField1']").val(ISBN);
            });
        });

    </script>

I am already using some of javascript functions but it is not working properly.............. Please anyone can help me?

Posted 23-May-13 16:14pm

SnvMohan

Updated 23-May-13 17:27pm

walterhevedeich

v2

Add a Solution

Comments

Thanks7872 24-May-13 0:16am

You have already been answered in the thread at http://www.codeproject.com/Questions/597118/Howplustoplusfixplusaplususerpluscanplusselectplus.You accepted answer also.Then again you posted question here.What does it mean?If you have any issue with that question dont repost it,ask there only.

_Amy 24-May-13 0:22am

Please go ahead with the answer already given(and also you accepted that). Any clarification required then you can improve your question there or(and) put a comment in the accepted answer.
How to fix a user can select only 10 check boxs at run time[^]

SnvMohan 24-May-13 0:45am

First time i have asked this question without my html code......and also i didnt asked my question correctly ...so only..... Here after its not happen again

2 solutions

Solution 2

Also try this link it will help you.
http://jquerybyexample.blogspot.com/2013/04/jquery-to-limit-number-of-checkboxes-user-can-select.html[^]

Posted 23-May-13 18:27pm

Pallavi Waikar

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)

_Amy · Accepted Answer · 2013-05-23T18:08:00

Solution 1

Set a count variable and check. If value is greater than 10 then show the message.
Try this:

JavaScript

$("[id$='SubmitBtn']").click(function () {
    var ISBN = [];
    var count = 0;
    $("[id$='LocationDataList'] input[type=checkbox]:checked").each(function () {
        ISBN.push($(this).val());
        count = count + 1;
    });   
    if(count > 10){
        alert('You selected more than 10 locations');
        return false;
    }
    else{
        $("[id$='HiddenField1']").val(ISBN);
        return true;
    }
});

--Amit

Posted 23-May-13 18:08pm

_Amy

Comments

Thanks7872 24-May-13 0:17am

The answer to this question has already been given at http://www.codeproject.com/Questions/597118/Howplustoplusfixplusaplususerpluscanplusselectplus.This is a repost.

_Amy 24-May-13 0:20am

Oh! I didn't search in CP. :)

SnvMohan 24-May-13 8:06am

Thank you so much...Its working perfectly.....

_Amy 24-May-13 8:27am

Welcome. :)