javascript - type - jQuery $("# radioButton"). cambio(...) no se activa durante la des-selección

validar radio button javascript checked

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

Aquí está la situación: estoy usando jQuery para capturar los cambios en un botón de opción. 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 de change 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>

Answer 1

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

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

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

Answer 3

El evento de change que no se activa al anular 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)

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

Answer 4

El mismo problema aquí, esto funcionó bien:

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

Answer 5

Esto normalmente funciona para mí:

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

Answer 6

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

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

Answer 7

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

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

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

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

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

Comentario de Per @ Ray, debes evitar usar nombres con . en ellos. Esos nombres funcionan en jQuery 1.7.2 pero no en otras versiones ( jsfiddle example. ).

Answer 8

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

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

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

Answer 9

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

jquery parte

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

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

aquí está la DEMO