Hi members,
I have this set of javascript codes which allows me to disable/enable checkboxes according to my selection.
The codes below allows me to set the default as "Select All" and disables the rest when "Select All" is checked during the 1st page load but not on postback.
The reason to not do it in post back is because e.g If a user did not check any checkbox in checkboxlist2, I want to prompt the user the select the check at least one checkbox in checkboxlist 2 but do not want to overwrite the user selection previously on postback with the default "Select All" in checkboxlist1 and checkboxlist2.
$(function () {
if($("#hidden").val() == "")
{
$("#Checkboxlist1 :checkbox").attr('disabled', 'disabled');
$("#Checkboxlist1 :checkbox[value='Select All']").removeAttr('disabled');
$("#Checkboxlist1 :checkbox[value='Select All']").prop("checked", true);
$("#Checkboxlist2 :checkbox").attr('disabled', 'disabled');
$("#Checkboxlist2 :checkbox[value='Select All']").removeAttr('disabled');
$("#Checkboxlist2 :checkbox[value='Select All']").prop("checked", true);
$("#hidden").val("set");
}
});
The codes below allows me enable/disable the link selections of checkboxlist1 and checkboxlist2.
$(function () {
$("#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");
}
}
});
});
$(function () {
$("#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;
}
}
});
});
My problem I am facing is that when I click on submit button, it does not disable automatically read the previous checked values and enable or disable other checkboxes as required in the codes during postback (since the function requires .change which only when something is click the function will only then called).
So lets say the user previously chose "Select All" but during post back the "Select All' is still checked but the rest of the list items are enabled (Supposedly to be disabled)
My question is:
upon postback my check values retains but the checkboxes disabled previously are enabled so how do I retain its whole state upon postback?
I did enabled my checkboxlist enableviewstate = true