jQuery $ ("# radioButton"). change (...) no se dispara durante la des-selección

Hace aproximadamente un mes, la pregunta de Mitt quedó sin respuesta. Lamentablemente, ahora me encuentro con la misma situación.

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

Aquí está la situación: estoy usando jQuery para capturar los cambios en un botón de radio. Cuando se selecciona el botón de radio, habilito un cuadro de edición. Cuando se desmarca el botón de radio, me gustaría que se deshabilitara el cuadro de edición.

La habilitación funciona. Cuando elijo un botón de opción diferente en el grupo, el changeevento no se activa. ¿Alguien sabe cómo arreglar esto?

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

Parece que la change()función solo se llama cuando marca un botón de radio, no cuando lo desmarca. La solución que utilicé es vincular el evento de cambio a cada botón de radio:

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

O podría dar a todos los botones de radio el mismo nombre:

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

Aquí hay un ejemplo de jsfiddle que funciona (actualizado del comentario de Chris Porter).

Según el comentario de @ Ray, debe evitar usar nombres con .ellos. Esos nombres funcionan en jQuery 1.7.2 pero no en otras versiones ( ejemplo de 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'/>                  

parte de jquery

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

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

aqui esta la DEMO

Puede enlazar a todos los botones de radio a la vez por nombre:

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

Ejemplo de trabajo aquí: http://jsfiddle.net/Ey4fa/

Esto normalmente funciona para mí:

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

Mi problema fue similar y esto funcionó para mí:

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

Digamos que esos botones de radio están dentro de un divque tiene la identificación radioButtonsy que los botones de radio tienen el mismo nombre (por ejemplo commonName):

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

los change evento que no se dispara en la deselección es el comportamiento deseado. Debe ejecutar un selector sobre todo el grupo de radio en lugar de solo el botón de radio único. Y su grupo de radio debe tener el mismo nombre (con valores diferentes)

Considere el siguiente código:

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

Tengo el mismo caso de uso que el suyo, es decir, mostrar un cuadro de entrada cuando se selecciona un botón de radio en particular. Si el evento también se disparara en la des-selección, obtendría 2 eventos cada vez.

El mismo problema aquí, esto funcionó bien:

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

Con Ajax, para mí trabajé:

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

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