Remove From My Forums

Allow to Select only two checkbox's by using Jquery/JavaScript

Question

User-582711651 posted

Hi,

Any only please help me,

I have 20 Checkboxs in my Aspx form, out of 20, I want to validate 10 checkboxes (ie. CBoxD1 to CBoxD10), in these 10 checkboxes, at a time the client can select only two checkboxes, how I do this validation by using Jquery / JavaScript, pls help.

Thanks in advance.

Ref my code

    <table>
    <tr>
    <td>
    <asp:CheckBox ID="CBoxD1" runat="server" CssClass="smalltext2" Text="D1" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD2" runat="server" CssClass="smalltext2" Text="D2" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD3" runat="server" CssClass="smalltext2" Text="D3" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD4" runat="server" CssClass="smalltext2" Text="D4" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD5" runat="server" CssClass="smalltext2" Text="D5" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD6" runat="server" CssClass="smalltext2" Text="D6" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD7" runat="server" CssClass="smalltext2" Text="D7" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD8" runat="server" CssClass="smalltext2" Text="D8" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD9" runat="server" CssClass="smalltext2" Text="D9" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD10" runat="server" CssClass="smalltext2" Text="D10" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD11" runat="server" CssClass="smalltext2" Text="D11" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD12" runat="server" CssClass="smalltext2" Text="D12" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD13" runat="server" CssClass="smalltext2" Text="D13" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD14" runat="server" CssClass="smalltext2" Text="D14" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD15" runat="server" CssClass="smalltext2" Text="D15" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD16" runat="server" CssClass="smalltext2" Text="D16" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD17" runat="server" CssClass="smalltext2" Text="D17" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD18" runat="server" CssClass="smalltext2" Text="D18" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD19" runat="server" CssClass="smalltext2" Text="D19" />
    </td>
    <td>
    <asp:CheckBox ID="CBoxD20" runat="server" CssClass="smalltext2" Text="20" />
    </td>
    </tr>
    </table>

Friday, May 28, 2021 3:04 PM

Answers

User-939850651 posted

Hi ayyappan.CNN,

Noted, but I wanna show an alert message when the user selects chckebox, not in submit

You only need to add onchange events to these elements to achieve it.

A simple demo:

    <script>
        $(function () {
            var CheckBoxs = $('input[id*="CBoxD"]').slice(0, 10);
            $(CheckBoxs).on('change', function () {
                let count = CheckBoxs.filter(':checked').length;
                //if (count == 2) {
                //    $.each(CheckBoxs, function (index, ele) {
                //        $(ele).attr('disabled', true);
                //    });
                //}
                if (count > 2) {
                    alert('You have selected ' + count + ' items, please choose 2 of them.');
                }
            })
        })
    </script>

Result:

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Tuesday, June 1, 2021 1:36 AM

All replies

User-939850651 posted

Hi ayyappan.CNN,

According to your description, If the IDs of these CheckBoxes are all similar, you could use the slice function to get a specific list and calculate the number of them selected.Something like this：

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <script>
        function CheckTwo() {
            //Get the list of the top ten CheckBox
            var CheckBoxs = $('input[id*="CBoxD"]').slice(0, 10);
            let count = CheckBoxs.filter(':checked').length;
            if (CheckBoxs.filter(':checked').length != 2) {
                alert('You have selected ' + count + ' items, please choose 2 of them.');
                return false;
            } else {
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>
                        <asp:CheckBox ID="CBoxD1" runat="server" CssClass="smalltext2" Text="D1" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD2" runat="server" CssClass="smalltext2" Text="D2" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD3" runat="server" CssClass="smalltext2" Text="D3" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD4" runat="server" CssClass="smalltext2" Text="D4" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD5" runat="server" CssClass="smalltext2" Text="D5" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD6" runat="server" CssClass="smalltext2" Text="D6" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD7" runat="server" CssClass="smalltext2" Text="D7" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD8" runat="server" CssClass="smalltext2" Text="D8" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD9" runat="server" CssClass="smalltext2" Text="D9" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD10" runat="server" CssClass="smalltext2" Text="D10" />

                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CBoxD11" runat="server" CssClass="smalltext2" Text="D11" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD12" runat="server" CssClass="smalltext2" Text="D12" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD13" runat="server" CssClass="smalltext2" Text="D13" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD14" runat="server" CssClass="smalltext2" Text="D14" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD15" runat="server" CssClass="smalltext2" Text="D15" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD16" runat="server" CssClass="smalltext2" Text="D16" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD17" runat="server" CssClass="smalltext2" Text="D17" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD18" runat="server" CssClass="smalltext2" Text="D18" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD19" runat="server" CssClass="smalltext2" Text="D19" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CBoxD20" runat="server" CssClass="smalltext2" Text="20" />
                    </td>
                </tr>
            </table>
            <br />
            <asp:Button Text="submit" ID="submitBtn" OnClientClick="return CheckTwo()" OnClick="submitBtn_Click" runat="server" />
        </div>
    </form>
</body>

protected void submitBtn_Click(object sender, EventArgs e)
        {
            Response.Write("<script>alert('Correct operation!');</script>");
        }

Result:

Best regards,

Xudong Peng

Monday, May 31, 2021 2:44 AM

0

Sign in to vote

User-582711651 posted

Hi,

Noted, but I wanna show an alert message when the user selects chckebox, not in submit, hope you understand.

Thanks

Monday, May 31, 2021 3:01 AM

User-939850651 posted

Hi ayyappan.CNN,

Noted, but I wanna show an alert message when the user selects chckebox, not in submit

You only need to add onchange events to these elements to achieve it.

A simple demo:

    <script>
        $(function () {
            var CheckBoxs = $('input[id*="CBoxD"]').slice(0, 10);
            $(CheckBoxs).on('change', function () {
                let count = CheckBoxs.filter(':checked').length;
                //if (count == 2) {
                //    $.each(CheckBoxs, function (index, ele) {
                //        $(ele).attr('disabled', true);
                //    });
                //}
                if (count > 2) {
                    alert('You have selected ' + count + ' items, please choose 2 of them.');
                }
            })
        })
    </script>

Result:

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Tuesday, June 1, 2021 1:36 AM

Answered by:

Allow to Select only two checkbox's by using Jquery/JavaScript

Question

Answers

All replies