Hi, I have 2 checkbox list which Checkboxlist2 items are considered a subsidiary from Checkboxlist1. Both Checkboxlist1 & Checkboxlist2 list items are populated from a stored procedure in SQL server. However I did add a "Select All" list item for both checkbox to allow select all and it will disable all other list items when "Select All" is checked.
I have 2 main questions I need help on with the codes:
1. How can I code to disable/enable certain checkbox items if a specific list item from check box 1 is checked?
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.
In 1st example scenario I checked colours and food so how can I code to only enable red, blue, green, chicken and spinach in checkboxlist2 OR in 2nd example scenario I checked only drinks in checkboxlist1 so it should only enable coke and juice which the rest of the list items should be disabled.
2. How can I put my script in a js.file instead of in header without receiving $ undefined error?
I seek your kind help in this urgent task of mine. Thanks a lot.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><html><head runat="server"><Script>$(document).ready(function () {
var checked = false;$('#<%=Checkboxlist1.ClientID%> input:checkbox').click(function () {
var currentIdone = 'Select All';
var currentId = $(this).next().html();
if (currentId == currentIdone) {
if (checked) {
$("#<%=Checkboxlist1.ClientID%> input").removeAttr('disabled');
checked = false;
return;
}
else {$("#<%=Checkboxlist1.ClientID%> input").attr('checked', false);$(this).attr('checked', true);$('#<%=Checkboxlist1.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
checked = true;
}
}
});
});
$(document).ready(function () {
var checked = false;$('#<%=Checkboxlist2.ClientID%> input:checkbox').click(function () {
var currentIdone = 'Select All';
var currentId = $(this).next().html();
if (currentId == currentIdone) {
if (checked) {
$("#<%=Checkboxlist2.ClientID%> input").removeAttr('disabled');
checked = false;
return;
}
else {$("#<%=Checkboxlist2.ClientID%> input").attr('checked', false);$(this).attr('checked', true);$('#<%=Checkboxlist2.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
checked = true;
}
}
});
});
</script> </head>
<body>
<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>
</body>
</html>