Required a Jquery | suming checkbox in aspx form

Question

Hi,

I have two gridvies, with one Label

<asp:Label ID="Gender" runat="server"></asp:Label>

If Lable having Gender Value is "Male" then count Limit is 2 if "Female" then count limit 4

Grid-1

 <asp:TemplateField HeaderText="D1"><ItemTemplate>
<asp:Label ID="D1" runat="server" Text='<%#Eval("D1")%>'></asp:Label>
</ItemTemplate></asp:TemplateField>
<asp:TemplateField HeaderText="D2"><ItemTemplate>
<asp:Label ID="D2" runat="server" Text='<%#Eval("D2")%>'></asp:Label>
</ItemTemplate></asp:TemplateField>

Grid-2

<asp:TemplateField HeaderText="D1">ItemTemplate> 
<asp:CheckBox ID="CBoxD1" runat="server" />
</ItemTemplate></asp:TemplateField>
<asp:TemplateField HeaderText="D2"><ItemTemplate>
<asp:CheckBox ID="CBoxD2" runat="server" />
</ItemTemplate></asp:TemplateField>

ref this Pic: When Gender is Female and Grid1 D1 value is 3 then client can select only one checbox in Grid2 D1 column then should alert message can't allow select another checkbox

ref Picture2:

Similar to this Gender is Male then Client can allow to select 2 Checkboxs

Answer 1

Hi @Aypn CNN

1. Get the ID of the asp.net control converted to HTML control

1. 2. Write js code for the Checkbox control (pay attention to the method of using client code)

<label for="chbox1">
<asp:CheckBox  id="chbox1" runat="server" onclick="judge(this)"   />
</label>
<label for="chbox2">
<asp:CheckBox id="chbox2" runat="server"  />
</label>

3.Get the value of label and the number of checkboxes selected. Finally, add it up to make an if judgment.

<script type="text/javascript">
    function judge(chbox1) {
        var num = document.getElementById("GridView1_D1_0").innerText;
        var checkboxnum = 0;
        var maxnum = 6;
        var checkcount = 0;
        for (let i = 0; i < maxnum; i++)
        {
            if (document.getElementById("GridView2_chbox1_" + checkboxnum).checked == true) {
                checkcount = checkcount + 1;
            }
            checkboxnum = checkboxnum + 1;
        }
        var result = parseInt(num) + parseInt(checkcount);
        if (result != 4) {
            alert(result);
           
            alert("Error");
        }
    }
    function judge(chbox2) {
        var num = document.getElementById("GridView1_D2_0").innerText;
        var checkboxnum = 0;
        var maxnum = 6;
        var checkcount = 0;
        for (let i = 0; i < maxnum; i++) {
            if (document.getElementById("GridView2_chbox2_" + checkboxnum).checked == true) {
                checkcount = checkcount + 1;
            }
            checkboxnum = checkboxnum + 1;
        }
        var result = parseInt(num) + parseInt(checkcount);
        if (result != 4) {
            alert(result);
            alert("Error");
        }
    }

Result:

Best Regards

Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi,

I prepared script and got soluation by using Jquery, ref my below code.

<script src="JScript/jquery-3.3.1.min.js" type="text/jscript"></script>

  <script type="text/javascript">

        function ccb1(obj) {

            var dc = $('#GrvDueCounts td:nth-child(3)').text();

            var num = parseInt(dc) || 0;

            var cc = $('#Grv_LocationPointer td:nth-child(5) input[type="checkbox"]:checked').length;

            var result = parseInt(num) + parseInt(cc);

            var model = $('#lbl_Model').html();

            var dlmt = (model == 'Male') ? 2 : 5;

            if (result > dlmt) {

                alert("Sorry! You can select up to " + dlmt + " Due Dates in a Village");

                var obj = event.target;

                $(obj).prop('checked', false);

            }

        }

        function ccb2(obj) {

            var dc = $('#GrvDueCounts td:nth-child(4)').text();

            var num = parseInt(dc) || 0;

            var cc = $('#Grv_LocationPointer td:nth-child(6) input[type="checkbox"]:checked').length;

            var result = parseInt(num) + parseInt(cc);

            var model = $('#lbl_Model').html();

            var dlmt = (model == 'Male') ? 2 : 5;

            if (result > dlmt) {

                alert("Sorry! You can select up to " + dlmt + " Due Dates in a Village");

                var obj = event.target;

                $(obj).prop('checked', false);

            }

        }

    </script>