jQuery $ ("# radioButton"). change (…) ne se déclenche pas lors de la désélection


172

Il y a environ un mois, la question de Mitt est restée sans réponse. Malheureusement, je suis dans la même situation maintenant.

http://api.jquery.com/change/#comment-133939395

Voici la situation: j'utilise jQuery pour capturer les modifications dans un bouton radio. Lorsque le bouton radio est sélectionné, j'active une zone d'édition. Lorsque le bouton radio est désélectionné, je souhaite que la zone d'édition soit désactivée.

L'habilitation fonctionne. Lorsque je choisis un bouton radio différent dans le groupe, l' changeévénement n'est pas déclenché. Est-ce que quelqu'un sait comment réparer ceci?

<input type="radio" id="r1" name="someRadioGroup"/> 

<script type="text/javascript">
    $("#r1").change(function () {
        if ($("#r1").attr("checked")) {
            $('#r1edit:input').removeAttr('disabled');
        }
        else {
            $('#r1edit:input').attr('disabled', true);
        }
    });
</script>

votre code actuel n'écoutera que le changement de bouton radio avecid=r1
Rafay

1
si id = r2 est sélectionné, id = r1 doit être désélectionné? la désélection d'un bouton radio n'est pas capturée par cela?
antwarpes

2
chk ça peut être ça aidera jsfiddle.net/aqZgs
Rafay

N'utilisez pas removeAttr ('disabled'), utilisez prop () pour changer l'état, voir ma réponse .
base6

Réponses:


311

On dirait que la change()fonction n'est appelée que lorsque vous cochez un bouton radio, pas lorsque vous le décochez. La solution que j'ai utilisée est de lier l'événement de modification à chaque bouton radio:

$("#r1, #r2, #r3").change(function () {

Ou vous pouvez donner à tous les boutons radio le même nom:

$("input[name=someRadioGroup]:radio").change(function () {

Voici un exemple de travail de jsfiddle (mis à jour à partir du commentaire de Chris Porter.)

Selon le commentaire de @ Ray, vous devriez éviter d'utiliser des noms avec .eux. Ces noms fonctionnent dans jQuery 1.7.2 mais pas dans les autres versions ( exemple jsfiddle ).


La solution jsFiddle est définie sur Mootools au lieu de jQuery et l'empêche de fonctionner. Essayez cette solution pour voir le comportement: jsfiddle.net/N9tBx . J'ai ajouté un journal des modifications et vous pouvez facilement voir que l'événement de modification n'est pas déclenché lorsque le bouton radio coché est décoché alors qu'un autre est coché.
Chris Porter

3
La syntaxe d'entrée "[name = someRadioGroup]" est incorrecte. La syntaxe correcte est: "input [name = someRadioGroup]: radio". Il convient également de noter que cette méthode ne fonctionne que dans la version 1.7.2 de JQuery. Un bug a été soumis pour cela. Voir: jsfiddle.net/zn7q2/2 pour un exemple de ce bogue si vous êtes curieux.
Ray

@Ray: Le bogue ne se produit que pour les noms contenant un point. Sans le point, cela fonctionne bien, voir jsfiddle.net/zn7q2/4
Andomar

1
L'exemple fonctionne avec des points si vous passez à "input [name = 'DateSearchOptions.Test']" (nom entre guillemets simples): jsfiddle.net/4hTxn
Nullpo

Le code "if ($ (" # myCheckbox "). Attr (" checked "))" n'a pas fonctionné pour moi, j'ai dû utiliser "if ($ (" # myCheckbox "). Is (": checked ") ) ".
Bartho Bernsmann

35
<input id='r1' type='radio' class='rg' name="asdf"/>
<input id='r2' type='radio' class='rg' name="asdf"/>
<input id='r3' type='radio' class='rg' name="asdf"/>
<input id='r4' type='radio' class='rg' name="asdf"/><br/>
<input type='text' id='r1edit'/>                  

partie jquery

$(".rg").change(function () {

if ($("#r1").attr("checked")) {
            $('#r1edit:input').removeAttr('disabled');
        }
        else {
            $('#r1edit:input').attr('disabled', 'disabled');
        }
                    });

voici la DEMO


Celui-ci fonctionne, contrairement aux autres qui ont été marqués comme corrects: S
William Contestabile

+1. La solution d'Andomar a fonctionné, mais cela a plus de sens pour moi. L'utilisation du sélecteur de classe évite d'avoir à changer la fonction si le formulaire change ou comporte un nombre dynamique de champs. Yay pour les votes nécros! (bien que maintenant 2 ans plus tard, jQuery recommande d'utiliser prop () au lieu de attr (). api.jquery.com/prop )
Travis

8
Devrait changer .attr('checked')en .prop('checked').
Justin

1
Mauvais exemple, ce n'est pas comme ça que ça se fait. Voir mon autre réponse pour désactiver les éléments (la suppression des attributs est incorrecte) .
base6

22

Vous pouvez vous lier à tous les boutons radio à la fois par leur nom:

$('input[name=someRadioGroup]:radio').change(...);

Exemple de travail ici: http://jsfiddle.net/Ey4fa/


Une variante de ceci est $ ("form input: radio"). Change (...); et testez le prop de condition de bouton radio spécifique («vérifié»). Ceci est très utile lors de l'utilisation d'une RadioButtonList dynamique dans ASP.NET.
Terence Golla

5

Cela fonctionne normalement pour moi:

if ($("#r1").is(":checked")) {}


3

Mon problème était similaire et cela a fonctionné pour moi:

$('body').on('change', '.radioClassNameHere', function() { ...

0

Disons que ces boutons radio sont à l'intérieur d'un divqui a l'id radioButtonset que les boutons radio ont le même nom (par exemple commonName) alors:

$('#radioButtons').on('change', 'input[name=commonName]:radio', function (e) {
    console.log('You have changed the selected radio button!');
});

0

L' changeévénement qui ne se déclenche pas lors de la désélection est le comportement souhaité. Vous devez exécuter un sélecteur sur l'ensemble du groupe radio plutôt que sur le seul bouton radio. Et votre groupe radio doit avoir le même nom (avec des valeurs différentes)

Considérez le code suivant:

$('input[name="job[video_need]"]').on('change', function () {
    var value;
    if ($(this).val() == 'none') {
        value = 'hide';
    } else {
        value = 'show';
    }
    $('#video-script-collapse').collapse(value);
});

J'ai le même cas d'utilisation que le vôtre, c'est-à-dire pour afficher une zone de saisie lorsqu'un bouton radio particulier est sélectionné. Si l'événement était également déclenché par désélection, j'obtiendrais 2 événements à chaque fois.


0

Même problème ici, cela a très bien fonctionné:

$('input[name="someRadioGroup"]').change(function() {
    $('#r1edit:input').prop('disabled', !$("#r1").is(':checked'));
});

-1

Avec Ajax, pour moi travaillé:

Html:

<div id='anID'>
 <form name="nameOfForm">
            <p><b>Your headline</b></p>
            <input type='radio' name='nameOfRadio' value='seed' 
             <?php if ($interviewStage == 'seed') {echo" checked ";}?> 
            onchange='funcInterviewStage()'><label>Your label</label><br>
 </form>
</div>

Javascript:

 function funcInterviewStage() {

                var dis = document.nameOfForm.nameOfRadio.value;

                //Auswahltafel anzeigen
                  if (dis == "") {
                      document.getElementById("anID").innerHTML = "";
                      return;
                  } else { 
                      if (window.XMLHttpRequest) {
                          // code for IE7+, Firefox, Chrome, Opera, Safari
                          xmlhttp = new XMLHttpRequest();
                      } else {
                          // code for IE6, IE5
                          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      xmlhttp.onreadystatechange = function() {
                          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                              document.getElementById("anID").innerHTML = xmlhttp.responseText;
                          }
                      }
                      xmlhttp.open("GET","/includes/[name].php?id="+dis,true);
                      xmlhttp.send();
                  }
              }  

Et php:

//// Get Value
$id = mysqli_real_escape_string($db, $_GET['id']);

//// Insert to database
$insert = mysqli_query($db, "UPDATE [TABLE] SET [column] = '$id' WHERE [...]");

//// Show radio buttons again
$mysqliAbfrage = mysqli_query($db, "SELECT [column] FROM [Table] WHERE [...]");
                  while ($row = mysqli_fetch_object($mysqliAbfrage)) {
                    ...
                  }
                  echo" 
                  <form name='nameOfForm'>
                      <p><b>Your headline</b></p>
                      <input type='radio' name='nameOfRadio' value='seed'"; if ($interviewStage == 'seed') {echo" checked ";} echo" onchange='funcInterviewStage()'><label>Yourr Label</label><br>
                      <input type='radio' name='nameOfRadio' value='startup'"; if ($interviewStage == 'startup') {echo" checked ";} echo" onchange='funcInterviewStage()'><label>Your label</label><br>

                  </form> ";

Cela ne répond pas à la question initiale du PO. Vous n'utilisez pas jQuery ici, et vous utilisez PHP pour gérer la logique de vérification, pas Javascript.
Alex Mulchinock
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.