jQuery $ (“# radioButton”). change (…) wird während der Abwahl nicht ausgelöst

Vor ungefähr einem Monat blieb Mitt's Frage unbeantwortet. Leider bin ich jetzt in der gleichen Situation.

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

Hier ist die Situation: Ich verwende jQuery, um die Änderungen in einem Optionsfeld zu erfassen. Wenn das Optionsfeld ausgewählt ist, aktiviere ich ein Bearbeitungsfeld. Wenn das Optionsfeld deaktiviert ist, möchte ich, dass das Bearbeitungsfeld deaktiviert wird.

Die Aktivierung funktioniert. Wenn ich ein anderes Optionsfeld in der Gruppe auswähle, wird das changeEreignis nicht ausgelöst. Weiß jemand, wie man das behebt?

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

Die change()Funktion wird anscheinend nur aufgerufen, wenn Sie ein Optionsfeld aktivieren, nicht, wenn Sie es deaktivieren. Die Lösung, die ich verwendet habe, besteht darin, das Änderungsereignis an jedes Optionsfeld zu binden:

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

Oder Sie können allen Optionsfeldern den gleichen Namen geben:

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

Hier ist ein funktionierendes jsfiddle-Beispiel (aktualisiert aus Chris Porters Kommentar).

Laut @ Rays Kommentar sollten Sie vermeiden, Namen mit .darin zu verwenden. Diese Namen funktionieren in jQuery 1.7.2, jedoch nicht in anderen Versionen ( Beispiel 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'/>                  

jquery Teil

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

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

Hier ist die DEMO

Sie können alle Optionsfelder gleichzeitig mit Namen binden:

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

Arbeitsbeispiel hier: http://jsfiddle.net/Ey4fa/

Das funktioniert normalerweise bei mir:

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

Mein Problem war ähnlich und das hat bei mir funktioniert:

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

Angenommen, diese Optionsfelder befinden sich in a div, das die ID hat, radioButtonsund die Optionsfelder haben dann (zum Beispiel commonName) denselben Namen :

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

Das change Ereignis, das bei Abwahl nicht ausgelöst wird, ist das gewünschte Verhalten. Sie sollten einen Selektor über die gesamte Optionsgruppe und nicht nur über das einzelne Optionsfeld ausführen. Und Ihre Funkgruppe sollte den gleichen Namen haben (mit unterschiedlichen Werten)

Betrachten Sie den folgenden Code:

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

Ich habe den gleichen Anwendungsfall wie Ihren, dh ein Eingabefeld anzuzeigen, wenn ein bestimmtes Optionsfeld ausgewählt ist. Wenn das Ereignis auch bei Abwahl ausgelöst würde, würde ich jedes Mal 2 Ereignisse erhalten.

Gleiches Problem hier, das hat gut funktioniert:

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

Mit Ajax hat für mich gearbeitet:

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

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