jQuery $ ("# radioButton"). change (…) não dispara durante a desmarcação


172

Há cerca de um mês, a pergunta de Mitt ficou sem resposta. Infelizmente, estou correndo para a mesma situação agora.

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

Aqui está a situação: estou usando o jQuery para capturar as alterações em um botão de opção. Quando o botão de opção é selecionado, habilito uma caixa de edição. Quando o botão de opção é desmarcado, desejo que a caixa de edição seja desativada.

A habilitação funciona. Quando escolho um botão de opção diferente no grupo, o changeevento não é acionado. Alguém sabe como consertar isso?

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

seu código atual ouvirá apenas a alteração no botão de opção comid=r1
Rafay 03/03

1
se id = r2 for selecionado, id = r1 deve ser desmarcado? desmarcar um botão de opção não é capturado por isso?
Antwarpes 03/03

2
chk este pode ser ele vai ajudar jsfiddle.net/aqZgs
Rafay

Não use removeAttr ('disabled'), use prop () para alterar o estado, veja minha resposta .
basic6

Respostas:


311

Parece que a change()função é chamada apenas quando você marca um botão de opção, não quando desmarca. A solução que usei é vincular o evento de mudança a cada botão de opção:

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

Ou você pode dar a todos os botões de opção o mesmo nome:

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

Aqui está um exemplo prático do jsfiddle (atualizado a partir do comentário de Chris Porter).

Pelo comentário de @ Ray, você deve evitar o uso de nomes .neles. Esses nomes funcionam no jQuery 1.7.2, mas não em outras versões ( exemplo do jsfiddle. ).


A solução jsFiddle é definida como Mootools, em vez de jQuery, e impede o funcionamento. Experimente esta solução para ver o comportamento: jsfiddle.net/N9tBx . Adicionei um log de alterações e você pode ver facilmente que o evento de alteração não é acionado quando o botão de opção marcado é desmarcado, enquanto outro é marcado.
22912 Chris Porter

3
A sintaxe de entrada "[name = someRadioGroup]" está incorreta. A sintaxe correta é: "input [name = someRadioGroup]: radio". Também digno de nota é que esse método funciona apenas na versão 1.7.2 do JQuery. Um bug foi enviado para isso. Veja: jsfiddle.net/zn7q2/2 para um exemplo deste bug, se você estiver curioso.
Ray

@ Ray: O bug ocorre apenas para nomes com um ponto neles. Sem o ponto ele funciona bem, veja jsfiddle.net/zn7q2/4
Andomar 23/08/13

1
O exemplo funciona com pontos se você mudar para "input [name = 'DateSearchOptions.Test']" (nome entre aspas simples): jsfiddle.net/4hTxn
Nullpo

O código "if ($ (" # myCheckbox "). Attr (" marcado "))" Não funcionou para mim, eu tive que usar "if ($ (" # myCheckbox "). Is (": selected ") ) ".
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'/>                  

parte jquery

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

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

aqui está a demo


Este funciona, ao contrário dos outros que foram marcados como corretos: S
William Contestabile

+1. A solução de Andomar funcionou, mas isso faz mais sentido para mim. O uso do seletor de classe impede a alteração da função se o formulário for alterado ou tiver um número dinâmico de campos. Yay para votos necro! (embora agora 2 anos mais tarde jQuery recomenda usar prop () em vez de attr (). api.jquery.com/prop )
Travis

8
Deve mudar .attr('checked')para .prop('checked').
23714 Justin justin


22

Você pode vincular a todos os botões de opção de uma só vez pelo nome:

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

Exemplo de trabalho aqui: http://jsfiddle.net/Ey4fa/


Uma variação disso é $ ("formulário de entrada: rádio"). Change (...); e teste o suporte específico da condição do botão de opção ('marcado'). Isso é muito útil ao usar um RadioButtonList dinâmico no ASP.NET.
Terence Golla

5

Isso normalmente funciona para mim:

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


3

Meu problema era semelhante e isso funcionou para mim:

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

0

Digamos que esses botões de opção estejam dentro de um divque tenha o ID radioButtonse que os botões de opção tenham o mesmo nome (por exemplo commonName):

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

0

O changeevento que não está sendo disparado na desmarcação é o comportamento desejado. Você deve executar um seletor em todo o grupo de opções e não apenas no botão de opção. E seu grupo de rádio deve ter o mesmo nome (com valores diferentes)

Considere o seguinte código:

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

Eu tenho o mesmo caso de uso que o seu, ou seja, para mostrar uma caixa de entrada quando um botão de opção específico é selecionado. Se o evento também fosse disparado na desmarcação, eu receberia 2 eventos por vez.


0

Mesmo problema aqui, isso funcionou muito bem:

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

-1

Com o Ajax, para mim, trabalhou:

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

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

Isso não responde à pergunta original dos OPs. Você não está usando jQuery aqui e está usando PHP para lidar com a lógica de verificação, não com Javascript.
precisa saber é o seguinte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.