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

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>

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

<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

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/

Cela fonctionne normalement pour moi:

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

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

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

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!');
});

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.

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

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

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