web-dev-qa-db-fra.com

jQuery $ ("# radioButton"). change (...) ne se déclenche pas pendant la désélection

Il y a environ un mois, la question de Mitt est restée sans réponse. Malheureusement, je me retrouve dans la même situation maintenant.

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

Voici la situation: jQuery est utilisé pour capturer les modifications d’un bouton radio. Lorsque le bouton radio est sélectionné, j'active une zone d'édition. Lorsque le bouton radio est désélectionné, je souhaite que la zone d'édition soit désactivée.

L'activation fonctionne. Lorsque je choisis un bouton radio différent dans le groupe, l'événement change est déclenché non. Est-ce que quelqu'un sait comment réparer ceci?

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

On dirait que la fonction change() n'est appelée que lorsque vous cochez une case d'option, pas lorsque vous la décochez. La solution que j'ai utilisée consiste à lier l'événement change à chaque bouton radio:

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

Ou vous pouvez donner le même nom à tous les boutons radio:

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

Voici un exemple de travail jsfiddle (mis à jour à partir du commentaire de Chris Porter).

Selon le commentaire de @ Ray, vous devriez éviter d'utiliser des noms avec . en eux. Ces noms fonctionnent dans jQuery 1.7.2 mais pas dans les autres versions ( exemple jsfiddle. ).

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 part

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

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

voici la démo

34
Rafay

Vous pouvez vous connecter à tous les boutons radio en même temps par leur nom:

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

Exemple de travail ici: http://jsfiddle.net/Ey4fa/

22
jterrace

Cela fonctionne normalement pour moi:

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

5
user3052657

Mon problème était similaire et cela a fonctionné pour moi:

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

Supposons que ces boutons radio se trouvent dans une div qui porte l'identifiant radioButtons et que les boutons radio ont le même nom (par exemple commonName), puis:

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

L'événement change qui ne se déclenche pas lors de la désélection est le comportement souhaité. Vous devez utiliser un sélecteur sur l’ensemble du groupe de radio plutôt que sur le bouton radio unique. Et votre groupe de radio devrait avoir le même nom (avec des valeurs différentes)

Considérons le code suivant:

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

J'ai le même cas d'utilisation que le vôtre, c'est-à-dire afficher une zone de saisie lorsqu'un bouton radio particulier est sélectionné. Si l'événement était également déclenché par une désélection, j'aurais deux événements à chaque fois.

0
vedant

Avec Ajax, pour moi a travaillé:

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

Et 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

Même problème ici, cela a bien fonctionné:

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