admin管理员组

文章数量:1289986

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.

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.

  • javascript
  • events
Share Improve this question edited May 5, 2009 at 3:53 Chad Grant 45.4k10 gold badges66 silver badges80 bronze badges asked May 5, 2009 at 2:50 TanamiTanami 1962 gold badges3 silver badges11 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 5

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>

The inputs do not fire the mouseout events because they are disabled.

So you have to wrap it in a div and catch the div's events.

If you want pure javascript, use Phaedrus's example "toggleDisabled" script.

If you want jQuery and not-so-newbie friendly:

<html>
<head>
   <title>Page</title>  
   <script src="jquery-1.3.2.min.js"></script>
   <script>
       $(function() {
           function toggleDisabled(d) {
               var disable = d;
               this.disableChildren = function() { $(this).children().each(function() { this.disabled = d; }); }
           }
           $("form .radios").hover(new toggleDisabled(true).disableChildren, new toggleDisabled(false).disableChildren);
       });
   </script>
</head>
   <body>
        <form>
           <div class="radios">
               <input type="radio" name="rigged" value="1"/> Item One<br />
               <input type="radio" name="rigged" value="2"/> Item Two<br />
               <input type="radio" name="rigged" value="3"/> Item Three<br />
               <input type="radio" name="rigged" value="4"/> Item Four
            </div>
        </form>      
   </body>
</html>

I had a similar problem with wanting an image to expose, and then go regular when the mouse left the image. I was using jQuery and ended up hooking into mouseenter and mouseout, instead of the events you are using. You might want to try those.

$('#rigged').mouseenter(function() {
    $(this).disabled = true;
  }).mouseout(function() {
    $(this).disabled = false;
  });

Something like that.

Again, that's using jQuery.

(You'll have to give the input radio button the id 'rigged')

I think when it's being disabled, it's not going to fire any events. You could try a few things.

  • On mouseover, make an invisible div overlay the radio box. This will make it impossible to use. Then on the mouseout of this invisible div, remove the div.

  • You could play with mouse x and y coords, and see if they overlay your radio elements. This isn't an optimal solution though.

Markup for the first, in jQuery, would go something like this

$('#rigged').after('<div id="overlay" style="display: none;"></div>'); // make this the size of the radio button and/or associated label (if present). also, maybe with absolute and relative positioning, make sure it will overlap the radio element

$('#rigged').bind('mouseover', function() {

    $('#overlay').show();

});

$('#overlay').live('mouseout', function() {
    $(this).hide();
});

You'll need to adapt this to work with multiple elements.

本文标签： eventsJavascript OnMouseOver and Out disablereenable item problemStack Overflow

版权声明：本文标题：events - Javascript OnMouseOver and Out disablere-enable item problem - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741473594a2380750.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。