I am encountering a wierd issue with IE7. I have a checkbox which controls the disabled state of another check box. In Firefox, this works normally, but in IE, the checkbox doesn’t appear enabled or disabled until you click somewhere on the page. That is, it is in the correct state but visually it doesn’t change.
Here is the relevant code that is executed when the user clicks on the controlling checkbox (for those of you unfamiliar with prototype, the $ function equates to document.getElementById and Event.element gets the element associated with an event.) :
var funcAssociatedWithActiveElement = function(event)
{
var isActive = Event.element(event).checked; ('displayInCsc').disabled = !isActive;
if (!isActive)
{
(‘displayInCsc’).checked = false;
}
}
I wrote a little test html file to see if I could reproduce the behaviour, but I couldn’t. I incorporated prototype.js and behaviour.js into the test, so I can rule that out as a source of the problem.
What HTML attribute are you using to call the JavaScript function? What IE is doing sounds like the (correct) behavior of onChange, that is, it will only be called if the element has been changed once it loses focus. onBlur is a similar attribute that is called whenever the element loses focus, regardless of if it has been changed.
I’ve had to get around this with other stuff (buttons, text fields, etc) by just making a CSS class called “disabled” and setting the element to that class at the same time as changing it to being disabled.
Unfortunately, I don’t think checkboxes can be stylized. “Background color” is actually the color around the damn box, IIRC. You may just want to hide the box when it’s disabled instead.
This might not be the right answer, but something to consider.