Javascript OnMouseOver et Out désactivent/ré-activent le problème de l'article

Je voulais avoir des boutons radio qui sont désactivés lorsque la souris est allée et réactivée quand elle s'est éteinte (juste pour le plaisir).Javascript OnMouseOver et Out désactivent/ré-activent le problème de l'article

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

Lorsque la souris s'allume, elle fait ce qu'elle devrait être lorsqu'elle se remettra du bouton pour ne pas la réactiver. En outre, comment est-ce que je le rend par défaut pour activer de sorte que lorsque vous actualisez la page, il ne reste pas désactivé.

Merci d'avance.

Source

2009-05-05 Tanami

Les entrées ne déclenchent pas les événements mouseout car ils sont désactivés.

Alors vous devez l'envelopper dans un div et attraper les événements div.

Si vous voulez du javascript pur, utilisez l'exemple de script "toggleDisabled" de Phaedrus.

Si vous voulez jQuery et pas si débutant amical:

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

Source

2009-05-05 03:50:30

Pourquoi 'new toggleDisabled'? Pourquoi ne pas simplement l'enfermer dans une fermeture: 'function toggleDisabled (d) {return function() {$ (this) .children(). Chaque (function() {this.disabled = d;})}}' – rossipedia

J'ai eu un problème similaire avec vouloir une image à exposer, puis aller régulièrement lorsque la souris a quitté l'image. J'utilisais jQuery et j'ai fini par me brancher sur mouseenter et mouseout, au lieu des événements que vous utilisez. Vous pourriez vouloir essayer ceux-là.

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

Quelque chose comme ça.

Encore une fois, cela utilise jQuery.

(Vous devrez donner le bouton radio d'entrée l'id « truquée »)

Source

2009-05-05 02:57:10

Vous pouvez obtenir le même effet en enveloppant vos boutons radio dans une balise div et le réglage de la onmouseover et onmouseout événements.

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

La solution ci-dessus ne fonctionne que dans IE, pour une solution qui fonctionne dans FireFox, procédez comme suit.

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

* Cette fonction javaScript a été emprunté ici: 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>

Source

2009-05-05 03:09:47 Phaedrus

Yeap. C'est tout! +1 – ichiban

Je ne savais pas que vous pouviez 'désactiver' un div. +1 – alex

ouais, bien votre top exemple/code ne fonctionne pas (au moins cross browser), donc vous devriez le supprimer et aller avec le script. –

Je pense que quand il devient désactivé, il ne va pas tirer des événements. Vous pourriez essayer quelques petites choses.

Au survol de la souris, faites un div superposé invisible à la case radio. Cela le rendra impossible à utiliser. Ensuite, au passage de cette div invisible, supprimez la div.
Vous pouvez jouer avec les coordonnées de la souris x et y, et voir si elles superposent vos éléments radio. Ce n'est pas une solution optimale cependant.

Markup pour la première, jQuery, serait quelque chose comme ça

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

Vous devez adapter ce pour travailler avec de multiples éléments.

Source

2009-05-05 03:11:11 alex

Javascript OnMouseOver et Out désactivent/ré-activent le problème de l'article

Répondre

Questions connexes