Javascript OnMouseOver and Out禁用/重新啓用項目問題

我希望有一些單選按鈕在鼠標移出時被禁用，並在它熄滅時再次啓用（僅用於娛樂）。Javascript OnMouseOver and Out禁用/重新啓用項目問題

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

當鼠標繼續它時，它做它應該是什麼，當它離開按鈕不會重新啓用。另外，如何使其默認啓用，以便在刷新頁面時不會保持禁用狀態。

在此先感謝。

來源

2009-05-05 Tanami

輸入不會觸發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>

來源

2009-05-05 03:50:30

我有一個類似的問題與希望的圖像曝光，然後去正規當鼠標離開圖像。我正在使用jQuery，最終掛鉤到mouseenter和mouseout，而不是您正在使用的事件。你可能想嘗試這些。

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

就是這樣的。

同樣，這是使用jQuery。

（你得給輸入單選按鈕的ID「操縱」）

來源

2009-05-05 02:57:10

你可以實現通過包裝你的單選按鈕在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>

來源

2009-05-05 03:09:47 Phaedrus

葉氏。就是這樣+1 – ichiban 2009-05-05 03:13:19

不知道你可以'禁用'一個div。 +1 – alex 2009-05-05 03:17:02

我認爲，當它變得禁用，它不會解僱任何事件。你可以嘗試一些事情。

在鼠標懸停時，使無形的div覆蓋收音機框。這將使它無法使用。然後在這個不可見的div的鼠標移出，刪除div。
你可以用鼠標x和y COORDS打球，看他們是否覆蓋你的收音機元素。儘管如此，這並不是最佳解決方案。

標記爲先，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(); 
});

你需要適應這種多元素的工作。

來源

2009-05-05 03:11:11 alex

Javascript OnMouseOver and Out禁用/重新啓用項目問題

回答

相關問題