Javascript-disabled components not disabled after back button

Question

Hi,

I'm disabling groups of radio buttons when a user clicks a checkbox, just using raw javascript and the disabled property.

My function is trivial:

function toggleEnabled(elementId) {
  e = document.getElementById(elementId)
  e.disabled = !e.disabled;
}

and it is called with the onClick event like onClick="toggleEnabled('radio_div')"

It works great, but if the user clicks back, the browser seems to remember the state of the checkbox, but resets the state of the components in the div to whatever they originally were.

This is in IE7, and I do not want to use a JS library right now so please no suggestions to that effect.

Am I doing something wrong? Is there a solution to get the intended behaviour (remember the state of both the checkbox and the div on Back)?

Answer 1

You have to check each radio box value within your onload method:

var selects = document.getElementByTagName("select");
for ( var i = 0 ; i < selects.length ; i ++ )
{
    //call your code if an option is checked
    if ( selects.options[selects.selectedIndex] )
    { 
        var selectedOption = selects.options[selects.selectedIndex];
        //now you got your option and can enable the div.
        toggleEnabled('radio_div');// <-- change this depending on selectedOption
    }
}