jeudi 24 septembre 2015

How to disable certain checkbox items in checkboxlist2 if a specific list item from checkboxlist1 is checked?

Hi I need some help here,

I have 2 checkboxlist which the 2 checkboxlist items are populated using a stored procedure. However I added a "Select All" list item to the checkbox list.

How can I expand my code to disable certain checkbox items in checkboxlist2 if a specific list item from checkboxlist1 is checked?

Taking the below as an example scenario:

e.g in checkboxlist1 there is colours, food and drinks populated with the select all as well and in checkboxlist2 there is red, blue, green, chicken, spinach, coke and juice populated.

If I checked only drinks in checkboxlist1 so it should only enable coke and juice which the rest of the list items should be disabled in checkboxlist2, lets say I add to checked 'Food' it should enable Chicken and spinach in in checkboxlist2 which means coke, juice, chicken and spinach will be enabled when I checked both.

Currently my code is only able to disable its own checkbox list items when "Select All" is checked. (lets say when I check "Select All" in checkboxlist1 it should disable the rest of the other checkboxes immediately other than "Select All" in checkboxlist1 and When I uncheck "Select All" it will enable all the other checkboxes again in checkboxlist1.)

    <asp:CheckBoxList ID="Checkboxlist1" runat="server" Height="80px" Width="500px" AppendDataBoundItems="True" ViewStateMode="Enabled">
                        <asp:ListItem Text="Select All" Value="Select All"></asp:ListItem>
                    </asp:CheckBoxList>
     <asp:CheckBoxList ID="Checkboxlist2" runat="server" Height="80px" Width="500px" AppendDataBoundItems="True" ViewStateMode="Enabled">
                        <asp:ListItem Text="Select All" Value="Select All"></asp:ListItem>
                    </asp:CheckBoxList>

$(function () {
    $("#Checkboxlist1 :checkbox").change(function () {
        $("#Checkboxlist1 :checkbox").click(function () {
            var ischecked = $(this).is(":checked");
            var val = $(this).val();
            //alert(val);
            if (val == "Select All") {
                if (ischecked) {
                    $("#Checkboxlist1 :checkbox").attr('disabled', 'disabled');
                    $(this).removeAttr('disabled');
                    $("#Checkboxlist1 :checkbox").prop("checked", false);
                    $(this).prop("checked", true);

                    return;
                } else {
                    $("#Checkboxlist1 :checkbox").removeAttr('disabled');
                    return;
                }
            }
        });
    });
})


$(function () {
    $("#Checkboxlist2 :checkbox").change(function () {
        $("#Checkboxlist2  :checkbox").click(function () {
            var ischecked = $(this).is(":checked");
            var val = $(this).val();
            //alert(val);
            if (val == "Select All") {
                if (ischecked) {
                    $("#Checkboxlist2 :checkbox").attr('disabled', 'disabled');
                    $(this).removeAttr('disabled');
                    $("#Checkboxlist2  :checkbox").prop("checked", false);
                    $(this).prop("checked", true);

                    return;
                } else {
                    $("#Checkboxlist2  :checkbox").removeAttr('disabled');
                    return;
                }
            }
        });
    });
})




Aucun commentaire:

Enregistrer un commentaire