jQuery $ ("# radioButton"). Cambio (...) no se activó durante la eliminación de la selección

Question

Hace aproximadamente un mes, la pregunta de Mitt no recibió respuesta. Tristemente, estoy corriendo en la misma situación ahora.

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

Esta es 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 desactiva el botón de opción, me gustaría que el cuadro de edición esté desactivado.

La habilitación funciona. Cuando elijo un botón de opción diferente en el grupo, el evento change es no disparado. ¿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> 

Answer 1

Parece que la función change() sólo se le llama cuando se echa un botón de opción, no cuando se la desactiva. La solución que utiliza es para enlazar el evento de cambio a todos los botones de radio:

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

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

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

Aquí hay un trabajo jsfiddle example (actualizado de Chris Porter comentario.)

Por comentario de @ Ray, debe evitar el uso de nombres con . en ellos. Esos nombres funcionan en jQuery 1.7.2 pero no en otras versiones (jsfiddle example.).

Answer 2

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

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

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

aquí es el DEMO

Answer 3

Puede unirse a todos los botones de radio a la vez por su nombre: ejemplo

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

Trabajar aquí: http://jsfiddle.net/Ey4fa/

Answer 4

Esto normalmente funciona para mí:

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

Answer 5

Digamos que esos botones de radio está dentro de un div que tiene el id radioButtons y que los botones de radio tienen el mismo nombre (por ejemplo commonName) a continuación:

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

Answer 6

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

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

Answer 7

Con el Ajax, para mí funcionó:

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

Answer 8

El change evento no disparar sobre anulación de la selección es el comportamiento deseado Debe ejecutar un selector sobre todo el grupo de radio en lugar de solo un botón de opción. Y su grupo de radio debe tener el mismo nombre (con diferentes valores)

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 mismo caso de uso como la suya, es decir, para mostrar un cuadro de entrada cuando se selecciona un botón de radio en particular . Si el evento se desencadenó también en la eliminación de la selección, obtendría 2 eventos cada vez.

Answer 9

mismo problema aquí, esto funcionó muy bien:

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