Question

我想让一些单选按钮在鼠标移动时禁用，并在外出时再次启用（只是为了好玩）。

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

当鼠标继续运行时，当它从按钮返回时不会重新启用它应该做的事情。另外，如何使其默认启用，以便在刷新页面时不会保持禁用状态。

提前致谢。

Answer 1

您可以通过将单选按钮包装在div标签中并设置onmouseover和onmouseout事件来实现相同的效果。

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

上述解决方案仅适用于IE，对于在FireFox中有效的解决方案，请执行以下操作。

<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>

*这个javaScript函数是从这里借来的：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>

Answer 2

我有一个类似的问题，想要一个图像曝光，然后在鼠标离开图像时定期。我使用jQuery并最终挂钩到mouseenter和mouseout，而不是你正在使用的事件。您可能想尝试这些。

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

类似的东西。

再次，那是使用jQuery。

（你必须给输入单选按钮id'装配'）

Answer 3

我认为当它变得残疾时，它不会发动任何事件。你可以尝试一些事情。

在鼠标悬停时，将一个不可见的div覆盖在单选框上。这将使其无法使用。然后在这个不可见的div的mouseout上删除div。
您可以使用鼠标x和y坐标，看看它们是否覆盖了您的无线电元素。但这不是最佳解决方案。

jQuery中的第一个标记就像这样

$('#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();
});

您需要对此进行调整以使用多个元素。

Answer 4

输入不会触发mouseout事件，因为它们已被禁用。

所以你必须将它包装在div中并捕获div的事件。

如果你想要纯粹的javascript，请使用Phaedrus的示例“toggleDisabled”脚本。

如果你想要jQuery而不是那么新手友好：

<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>

Javascript OnMouseOver和Out禁用/重新启用项目问题

4 个答案: