wake-up-neo.com

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

Vor einem Monat blieb Mitts Frage unbeantwortet. Leider renne ich jetzt in dieselbe Situation.

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

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

Die Ermöglichung funktioniert. Wenn ich ein anderes Optionsfeld in der Gruppe wähle, wird das Ereignis changenicht ausgelöst. Weiß jemand, wie man das beheben kann?

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

Die Funktion change() wird nur aufgerufen, wenn Sie ein Optionsfeld markieren, und nicht, wenn Sie es deaktivieren. Die von mir verwendete Lösung besteht darin, das Änderungsereignis an jeden Optionsschalter zu binden:

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

Oder Sie können allen Optionsschaltflächen denselben Namen geben:

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

Hier ist ein funktionierendes jsfiddle-Beispiel (aktualisiert aus dem Kommentar von Chris Porter.)

Per @ Rays Kommentar sollten Sie die Verwendung von Namen mit . vermeiden. Diese Namen funktionieren in jQuery 1.7.2, jedoch nicht in anderen Versionen ( jsfiddle Beispiel. ).

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

34
Rafay

Sie können an alle Optionsfelder gleichzeitig mit Namen binden:

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

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

22
jterrace

Das funktioniert normalerweise bei mir:

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

5
user3052657

Mein Problem war ähnlich und das funktionierte für mich:

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

Nehmen wir an, diese Optionsfelder befinden sich in einem div, das die ID radioButtons hat und dass die Optionsfelder denselben Namen haben (zum Beispiel commonName):

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

Das change-Ereignis, das bei Abwahl nicht ausgelöst wird, ist das gewünschte Verhalten. Sie sollten einen Selektor für die gesamte Funkgruppe und nicht nur für ein einzelnes Optionsfeld ausführen. Und Ihre Funkgruppe sollte denselben 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 Sie, d. H. Um ein Eingabefeld anzuzeigen, wenn ein bestimmtes Optionsfeld ausgewählt ist. Wenn das Ereignis auch aufgrund von Abwahl ausgelöst wurde, würde ich jedes Mal zwei Ereignisse erhalten.

0
vedant

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

Dasselbe Problem hier, das hat gut funktioniert:

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