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

172

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>
Antwarpes
quelle
Ihr aktueller Code hört nur die Änderung des id=r1
Optionsfelds
1
Wenn id = r2 ausgewählt ist, sollte id = r1 deaktiviert werden. Abwahl eines Optionsfeldes wird dadurch nicht erfasst?
Antwarpes
2
chk das kann sein, es wird jsfiddle.net/aqZgs
Rafay
Verwenden Sie nicht removeAttr ('disabled'), verwenden Sie prop (), um den Status zu ändern, siehe meine Antwort .
basic6

Antworten:

311

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

Andomar
quelle
Die jsFiddle-Lösung ist auf Mootools anstelle von jQuery eingestellt und verhindert, dass sie funktioniert. Versuchen Sie diese Lösung, um das Verhalten zu sehen: jsfiddle.net/N9tBx . Ich habe ein Änderungsprotokoll hinzugefügt, und Sie können leicht erkennen, dass das Änderungsereignis nicht ausgelöst wird, wenn das aktivierte Optionsfeld deaktiviert ist, während ein anderes aktiviert ist.
Chris Porter
3
Die Eingabesyntax "[name = someRadioGroup]" ist falsch. Die korrekte Syntax lautet: "input [name = someRadioGroup]: radio". Erwähnenswert ist auch, dass diese Methode nur in Version 1.7.2 von JQuery funktioniert. Hierfür wurde ein Fehler gemeldet. Ein Beispiel für diesen Fehler finden Sie unter : jsfiddle.net/zn7q2/2, wenn Sie neugierig sind.
Ray
@ Ray: Der Fehler tritt nur bei Namen mit einem Punkt auf. Ohne den Punkt funktioniert es gut, siehe jsfiddle.net/zn7q2/4
Andomar
1
Das Beispiel funktioniert mit Punkten, wenn Sie zu "input [name = 'DateSearchOptions.Test']" (Name zwischen einfachen Anführungszeichen) wechseln
Nullpo
Der Code "if ($ (" # myCheckbox "). Attr (" check "))" Hat bei mir nicht funktioniert, ich musste "if ($ (" # myCheckbox ") verwenden. Is (": check ") ) ".
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'/>                  

jquery Teil

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

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

Hier ist die DEMO

Rafay
quelle
Dieser funktioniert im Gegensatz zu den anderen, die als korrekt markiert wurden: S
William Contestabile
+1. Andomars Lösung hat funktioniert, aber das macht für mich mehr Sinn. Durch die Verwendung der Klassenauswahl wird verhindert, dass die Funktion geändert werden muss, wenn sich das Formular ändert oder eine dynamische Anzahl von Feldern aufweist. Yay für Nekrostimmen! (obwohl jetzt 2 Jahre später jQuery empfiehlt, prop () anstelle von attr () zu verwenden. api.jquery.com/prop )
Travis
8
Sollte sich ändern .attr('checked')zu .prop('checked').
Justin
1
Schlechtes Beispiel, so wird es nicht gemacht. Siehe meine andere Antwort zum Deaktivieren von Elementen (das Entfernen von Attributen ist falsch) .
basic6
22

Sie können alle Optionsfelder gleichzeitig mit Namen binden:

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

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

jterrace
quelle
Eine Variation davon ist $ ("Formulareingabe: Radio"). Change (...); und testen Sie die spezifische Optionsfeldbedingung ('markiert'). Dies ist sehr nützlich, wenn Sie eine dynamische RadioButtonList in ASP.NET verwenden.
Terence Golla
5

Das funktioniert normalerweise bei mir:

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

user3052657
quelle
3

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

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

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

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.

vedant
quelle
0

Gleiches Problem hier, das hat gut funktioniert:

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

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> ";
Sven
quelle
Dies beantwortet nicht die ursprüngliche Frage des OP. Sie verwenden hier nicht jQuery, und Sie verwenden PHP, um die Überprüfungslogik zu handhaben, nicht Javascript.
Alex Mulchinock