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

172

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>
Antwarpes
fuente
su código actual solo escuchará el cambio en el botón de radio conid=r1
Rafay
1
si se selecciona id = r2, ¿id = r1 debe ser des-seleccionado? esto no captura la selección de un botón de radio?
antwarpes
2
chk esto puede ser que ayudará jsfiddle.net/aqZgs
Rafay
No use removeAttr ('disabled'), use prop () para cambiar el estado, vea mi respuesta .
basic6

Respuestas:

311

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

Andomar
fuente
La solución jsFiddle está configurada en Mootools en lugar de jQuery y evita que funcione. Pruebe esta solución para ver el comportamiento: jsfiddle.net/N9tBx . Agregué un registro de cambios y puede ver fácilmente que el evento de cambio no se activa cuando el botón de opción marcado no está marcado como se marca otro.
Chris Porter
3
La sintaxis de entrada "[name = someRadioGroup]" es incorrecta. La sintaxis correcta es: "input [name = someRadioGroup]: radio". También vale la pena señalar que este método solo funciona en la versión 1.7.2 de JQuery. Se ha enviado un error para esto. Consulte: jsfiddle.net/zn7q2/2 para ver un ejemplo de este error si tiene curiosidad.
Ray
@Ray: El error solo ocurre para nombres con un punto en ellos. Sin el punto funciona bien, vea jsfiddle.net/zn7q2/4
Andomar el
1
El ejemplo funciona con puntos si cambia a "input [name = 'DateSearchOptions.Test']" (nombre entre comillas simples): jsfiddle.net/4hTxn
Nullpo
El código "if ($ (" # myCheckbox "). Attr (" marcado "))" No funcionó para mí, tuve que usar "if ($ (" # myCheckbox "). Es (": marcado ") ) ".
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'/>                  

parte de jquery

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

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

aqui esta la DEMO

Rafay
fuente
Este funciona, a diferencia de los otros que se han marcado como correctos: S
William Contestabile
+1. La solución de Andomar funcionó, pero esto tiene más sentido para mí. El uso del selector de clase evita tener que cambiar la función si el formulario cambia o tiene un número dinámico de campos. ¡Yay por votos necro! (aunque ahora 2 años después, jQuery recomienda usar prop () en lugar de attr (). api.jquery.com/prop )
Travis
8
Debería cambiar .attr('checked')a .prop('checked').
Justin
1
Mal ejemplo, no es así como se hace. Vea mi otra respuesta para deshabilitar elementos (eliminar atributos es incorrecto) .
basic6
22

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/

jterrace
fuente
Una variación de esto es $ ("entrada de formulario: radio"). Change (...); y pruebe el accesorio de condición de botón de radio específico ('marcado'). Esto es muy útil cuando se usa una RadioButtonList dinámica en ASP.NET.
Terence Golla
5

Esto normalmente funciona para mí:

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

usuario3052657
fuente
3

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

$('body').on('change', '.radioClassNameHere', function() { ...
Alex Sim
fuente
0

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!');
});
Marko Letic
fuente
0

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.

vedant
fuente
0

El mismo problema aquí, esto funcionó bien:

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

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> ";
Sven
fuente
Esto no responde a la pregunta original de los OP. No estás usando jQuery aquí, y estás usando PHP para manejar la lógica de verificación, no Javascript.
Alex Mulchinock