Javascript OnMouseOver and Out disable/re-enable item problem

eventsjavascript

I wanted to have some radio buttons that disabled when the mouse went over and enabled again when it went out (just for fun).

<form>
<input type="radio" name="rigged" onMouseOver="this.disabled=true" onMouseOut="this.disabled=false">
</form>

When the mouse goes on it it does what it should be when it goes back off the button wont re-enable. Also, how do I make it default to enable so that when you refresh the page it doesn't stay disabled.

Thanks in advance.

Best Solution

You could achieve the same effect by wrapping your radio buttons in a div tag and setting the onmouseover and onmouseout events.

<div id="container" onmouseout="this.disabled=false" onmouseover="this.disabled=true">
    <input name="rigged" type="radio">
</div>

The above solution only works in IE, for a solution that works in FireFox do the following.

<script type="text/javascript">
    function toggleDisabled(el) {
        try {
            el.disabled = el.disabled ? false : true;
        }
        catch(E){
        }
        if (el.childNodes && el.childNodes.length > 0) {
            for (var x = 0; x < el.childNodes.length; x++) {
                toggleDisabled(el.childNodes[x]);
            }
        }
     }
</script>

*This javaScript function was borrowed from here: Enable or disable DIV tag and its inner controls using Javascript

<div id="container" onmouseover="toggleDisabled(this)" onmouseout="toggleDisabled(this)">
    <input name="rigged" type="radio">          
</div>
Related Question