Firstly, remove the loop inside the
change
event as its resetting the ischecked value each time and use it like:
$("#Checkboxlist1 :checkbox").change(function () {
var ischecked = $(this).is(":checked");
var val = $(this).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");
}
}
});
Second you can can't have a one click event inside a
change
event. So, just use the change event and use all the code inside the click event like:-
$("#Checkboxlist2 :checkbox").change(function () {
var ischecked = $(this).is(":checked");
var val = $(this).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;
}
}
});
Also, there is no need to have multiple document ready event handler
$(function () {
, just use one and put the above codes inside it. It will just work fine.
Let me know if you are still facing any issue in it.