How do I retain disabled checkboxes upon postback?

Question

1.00/5 (1 vote)

See more:

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.

JavaScript

$(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.

JavaScript

$(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;
                }
            }
        });
    });

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

Posted 24-Sep-15 23:37pm

waynetan123

Updated 25-Sep-15 0:15am

v6

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Palash Mondal_ · Accepted Answer · 2015-09-25T00:04:00

Solution 1

In order to retain the disabled state, you can loop through the checked checkboxes like:

JavaScript

$(function () {
    $("#Checkboxlist1 :checkbox:checked").each(function () {
        var ischecked = true;
        var val = $(this).val();
        //alert(val);
        if (val == "Select All") {
            $("#Checkboxlist1 :checkbox").attr('disabled', 'disabled');
            $(this).removeAttr('disabled');
            $("#Checkboxlist1  :checkbox").prop("checked", false);
            $(this).prop("checked", true);
            $("#Checkboxlist2 :checkbox").removeAttr('disabled');
            return;
        }
        // other if else statement here..
    });
});

I have added just the part of the code. Hope you got the logic here...

Posted 25-Sep-15 0:04am

Palash Mondal_

Comments

waynetan123 25-Sep-15 7:13am

Hi, I think there is a need to have the change statement or else there will be problems checking the box.

$(function () {
$("#Checkboxlist1 :checkbox").change(function () {
$("#Checkboxlist1 :checkbox:checked").each(function () {
var ischecked = true;
var val = $(this).val();
//alert(val);
if (val == "Select All") {
$("#Checkboxlist1 :checkbox").attr('disabled', 'disabled');
$(this).removeAttr('disabled');
$("#Checkboxlist1 :checkbox").prop("checked", false);
$(this).prop("checked", true);
$("#Checkboxlist2 :checkbox").removeAttr('disabled');
return;
}
// other if else statement here..
});
});

This is the rough concept but it still doesn't work

Palash Mondal_ 25-Sep-15 7:25am

There is no need to remove the existing change event. This is just an additional code just to retain the checked checkboxes values on post backs.

waynetan123 25-Sep-15 7:31am

ohh so I need to create an additional function with the exact same codes but just to change .change to .each?

Palash Mondal_ 25-Sep-15 7:42am

You can put the code inside a function and then re-use it in both change & each event like

$("#Checkboxlist1 :checkbox").change(function () {
fnSomeDemoFunction(this);
});

$("#Checkboxlist1 :checkbox:checked").each(function () {
fnSomeDemoFunction(this);
});

waynetan123 25-Sep-15 7:50am

what should I replace with for fnSomeDemoFunction(this);?

Palash Mondal_ 25-Sep-15 7:57am

all you duplicate code inside change and each methods starting from

var ischecked = $(this).is(":checked");

waynetan123 25-Sep-15 11:53am

thanks for the help once again