jQuery $ ("# radioButton"). change (...) non si attiva durante la deselezione

Circa un mese fa la domanda di Mitt è rimasta senza risposta. Purtroppo, ora mi trovo nella stessa situazione.

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

Ecco la situazione: sto usando jQuery per acquisire le modifiche in un pulsante di opzione. Quando il pulsante di opzione è selezionato, abilito una casella di modifica. Quando il pulsante di opzione è deselezionato, desidero disabilitare la casella di modifica.

L'abilitazione funziona. Quando scelgo un pulsante di opzione diverso nel gruppo, l' changeevento non viene generato. Qualcuno sa come risolvere questo problema?

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

Sembra che la change()funzione sia chiamata solo quando si seleziona un pulsante di opzione, non quando si deseleziona. La soluzione che ho usato è di associare l'evento change ad ogni pulsante di opzione:

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

Oppure potresti dare a tutti i pulsanti di opzione lo stesso nome:

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

Ecco un esempio di jsfiddle funzionante (aggiornato dal commento di Chris Porter.)

Per il commento di @ Ray, dovresti evitare di usare nomi con .dentro. Quei nomi funzionano in jQuery 1.7.2 ma non in altre versioni ( esempio 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 jquery

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

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

ecco la DEMO

Puoi associare tutti i pulsanti di opzione contemporaneamente per nome:

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

Esempio di lavoro qui: http://jsfiddle.net/Ey4fa/

Questo normalmente funziona per me:

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

Il mio problema era simile e questo ha funzionato per me:

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

Diciamo che quei pulsanti di opzione sono all'interno di un divche ha l'id radioButtonse che i pulsanti di opzione hanno lo stesso nome (ad esempio commonName) quindi:

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

L' changeevento che non si attiva sulla deselezione è il comportamento desiderato. È necessario eseguire un selettore sull'intero gruppo radio anziché sul solo pulsante di opzione. E il tuo gruppo radio dovrebbe avere lo stesso nome (con valori diversi)

Considera il seguente codice:

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

Ho lo stesso caso d'uso del tuo, cioè per mostrare una casella di input quando viene selezionato un particolare pulsante di opzione. Se l'evento fosse stato attivato anche con la deselezione, avrei ricevuto 2 eventi ogni volta.

Lo stesso problema qui, ha funzionato bene:

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

Con Ajax, per me ha funzionato:

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

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