jQuery $ (“# radioButton”). change (…) nie odpala podczas de-selekcji


172

Około miesiąc temu pytanie Mitta pozostało bez odpowiedzi. Niestety, teraz mam taką samą sytuację.

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

Oto sytuacja: używam jQuery do przechwytywania zmian w przycisku opcji. Po wybraniu przycisku opcji włączam pole edycji. Gdy przycisk radiowy jest odznaczony, chciałbym, aby pole edycji zostało wyłączone.

Umożliwienie działa. Gdy wybieram inny przycisk opcji w grupie, changezdarzenie nie jest uruchamiane. Czy ktoś wie, jak to naprawić?

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

Twój obecny kod będzie nasłuchiwał tylko zmiany przycisku radiowego zid=r1
Rafay

1
jeśli wybrano id = r2, to powinno zostać odznaczone id = r1? nie obejmuje to odznaczenia przycisku radiowego?
antwarpes

2
chk, to może być to pomoże jsfiddle.net/aqZgs
Rafay

Nie używaj removeAttr ('disabled'), użyj prop (), aby zmienić stan, zobacz moją odpowiedź .
basic6

Odpowiedzi:


311

Wygląda na to, że change()funkcja jest wywoływana tylko wtedy, gdy zaznaczysz przycisk opcji, a nie gdy go odznaczysz. Rozwiązaniem, którego użyłem, jest powiązanie zdarzenia zmiany z każdym przyciskiem radiowym:

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

Lub możesz nadać wszystkim przyciskom radiowym tę samą nazwę:

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

Oto działający przykład jsfiddle (zaktualizowany na podstawie komentarza Chrisa Portera).

Zgodnie z komentarzem @ Ray, powinieneś unikać używania imion zawierających .w nich nazwy . Te nazwy działają w jQuery 1.7.2, ale nie w innych wersjach ( np. Jsfiddle ).


Rozwiązanie jsFiddle jest ustawione na Mootools zamiast jQuery i zapobiega jego działaniu. Wypróbuj to rozwiązanie, aby zobaczyć zachowanie: jsfiddle.net/N9tBx . Dodałem dziennik zmian i łatwo widać, że zdarzenie zmiany nie jest wywoływane, gdy zaznaczony przycisk radiowy jest odznaczony, gdy inny jest zaznaczony.
Chris Porter,

3
Składnia danych wejściowych „[name = someRadioGroup]” jest nieprawidłowa. Prawidłowa składnia to: „input [name = someRadioGroup]: radio”. Warto również zauważyć, że ta metoda działa tylko w wersji 1.7.2 JQuery. W związku z tym zgłoszono błąd. Zobacz: jsfiddle.net/zn7q2/2, aby zobaczyć przykład tego błędu, jeśli jesteś ciekawy.
Ray

@Ray: błąd występuje tylko w przypadku nazw z kropką. Bez kropki działa dobrze, patrz jsfiddle.net/zn7q2/4
Andomar

1
Przykład działa z kropkami, jeśli zmienisz na „input [name = 'DateSearchOptions.Test']” (nazwa ujęta w pojedyncze cudzysłowy): jsfiddle.net/4hTxn
Nullpo

Kod "if ($ (" # myCheckbox "). Attr (" zaznaczone "))" Nie działał dla mnie, musiałem użyć "if ($ (" # myCheckbox "). Is (": zaznaczone ") ) ”.
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'/>                  

część jQuery

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

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

tutaj jest DEMO


Ten działa, w przeciwieństwie do innych, które zostały oznaczone jako poprawne: S
William Contestabile

+1. Rozwiązanie Andomara zadziałało, ale ma to dla mnie większy sens. Użycie selektora klasy zapobiega konieczności zmiany funkcji, jeśli formularz ulegnie zmianie lub ma dynamiczną liczbę pól. Yay dla głosów Necro! (choć teraz 2 lata później jQuery zaleca używanie prop () zamiast attr (). api.jquery.com/prop )
Travis

8
Powinien zmienić się .attr('checked')na .prop('checked').
Justin,


22

Możesz powiązać się ze wszystkimi przyciskami radiowymi naraz według nazwy:

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

Przykład roboczy tutaj: http://jsfiddle.net/Ey4fa/


Odmianą tego jest $ ("form input: radio"). Change (...); i przetestuj właściwość warunku określonego przycisku radiowego („zaznaczono”). Jest to bardzo przydatne w przypadku korzystania z dynamicznej listy RadioButtonList w programie ASP.NET.
Terence Golla


3

Mój problem był podobny i to zadziałało dla mnie:

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

0

Powiedzmy, że te przyciski opcji znajdują się wewnątrz a, divktóre ma identyfikator radioButtonsi że przyciski opcji mają taką samą nazwę (na przykład commonName), a następnie:

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

0

changeZdarzenia nie strzelania na cofnięcie jest pożądane zachowanie. Powinieneś uruchomić selektor dla całej grupy radiowej, a nie tylko jednego przycisku opcji. Twoja grupa radiowa powinna mieć tę samą nazwę (z różnymi wartościami)

Rozważ następujący kod:

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

Mam taki sam przypadek użycia jak twój, tj. Pokazanie pola wprowadzania danych po wybraniu określonego przycisku opcji. Gdyby zdarzenie zostało uruchomione również po usunięciu selekcji, za każdym razem otrzymywałbym 2 zdarzenia.


0

Ten sam problem, to działało dobrze:

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

-1

Z Ajaxem pracowałem dla mnie:

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

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

To nie odpowiada na pierwotne pytanie PO. Nie używasz tutaj jQuery i używasz PHP do obsługi logiki sprawdzania, a nie Javascript.
Alex Mulchinock
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.