Question

I have two checkboxes in a form and if the first checkbox is checked, the second should be enabled, and if the first is unchecked the second should be disabled. I made a quick function to handle this:

function toggleElement(sender, receiver)
{
    var sendEl = document.getElementById(sender);
    var recEl = document.getElementById(receiver);
    if (sendEl.checked)
        recEl.disabled = false;
    else
        recEl.disabled = 'disabled';
}

This works fine in FF and IE 8/9 but doesn’t do anything in IE7, I added the following to see what was happening:

alert(receiver);
alert(recEl);
alert(recEl.disabled);

In the browsers that work (FF, IE8+) these alert ‘name’, ‘[object]’, and ‘true’ if disabled ‘false’ if not. In IE7 the alerts are fired but say ‘name’, ‘[object]’, and ‘true’ even though the checkbox is never disabled (it does not get greyed out and I can continue to click it)

Any ideas why it isn’t working in IE7?

Answer 1

When you’re manipulating the DOM, the disabled property should be set to true or false, not a string. What happens if you replace 'disabled' with true?

Also you might simplify the logic to

recEl.disabled = !sendEl.checked;

This is very basic stuff in JavaScript; even IE shouldn’t be having a problem with it.