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

See more:

C#

ASP

Javascript

checkbox

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.

Why does does it not work? when I checked a item in checkbox1 it did not enable the specific items I set in my codes.

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.

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>

Checkboxlist1.DataSource = ds.Tables[0];
               Checkboxlist1.DataTextField = ds.Tables[0].Columns["Column1"].ToString();
               Checkboxlist1.DataValueField = ds.Tables[0].Columns["Column1"].ToString();
               Checkboxlist1.DataBind();
               Checkboxlist2.DataSource = ds.Tables[1];
               Checkboxlist2.DataTextField = ds.Tables[1].Columns["Column2"].ToString();
               Checkboxlist2.DataValueField = ds.Tables[1].Columns["Column2"].ToString();
               Checkboxlist2.DataBind();

$(function () {
    $("#Checkboxlist1 :checkbox").change(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);
                    $("#Checkboxlist2 :checkbox").removeAttr('disabled');

                    return;
                } else {
                    $("#Checkboxlist1 :checkbox").removeAttr('disabled');
                    $("#Checkboxlist2 :checkbox").attr('disabled', 'disabled');
                    return;
                }
            } else if (val != "Select All") {
                if (ischecked) {
                    $("#Checkboxlist1 :checkbox[value='Select All']").prop("checked", false);
                }
            } else if (val == "Food") {
                if (ischecked) {
                    $("#Checkboxlist2 :checkbox[value='Chicken']").removeAttr('disabled');
                    $("#Checkboxlist2 :checkbox[value=spinach]").removeAttr('disabled');

                } else {
                    $("#Checkboxlist2 :checkbox[value='Chicken']").attr("disabled", "disabled");
                  $("#Checkboxlist2 :checkbox[value='Spinach']").attr("disabled", "disabled");


                }
            } else if (val == "Drinks") {
                if (ischecked) {
                    $("#Checkboxlist2 :checkbox[value='Coke']").removeAttr('disabled');
                    $("#Checkboxlist2 :checkbox[value='Juice']").removeAttr('disabled');

                } else {
                    $("#Checkboxlist2 :checkbox[value='Coke']").attr("disabled", "disabled");
                    $("#Checkboxlist2 :checkbox[value=Juice]").attr("disabled", "disabled");
                }
            }
        });
    });


$(function () {
    $("#Checkboxlist2 :checkbox").change(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;
                }
            }
        });
    });