jQuery $ ("# radioButton"). ubah (...) tidak diaktifkan saat de-seleksi

Sekitar sebulan yang lalu pertanyaan Mitt tidak dijawab. Sedihnya, saya mengalami situasi yang sama sekarang.

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

Inilah situasinya: Saya menggunakan jQuery untuk menangkap perubahan di tombol radio. Ketika tombol radio dipilih, saya mengaktifkan kotak edit. Ketika tombol radio tidak dipilih, saya ingin kotak edit dinonaktifkan.

Pengaktifan bekerja. Ketika saya memilih tombol radio yang berbeda dalam grup, changeacara tersebut tidak diaktifkan. Adakah yang tahu bagaimana cara memperbaikinya?

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

Sepertinya change()fungsi ini hanya dipanggil ketika Anda memeriksa tombol radio, bukan ketika Anda tidak mencentangnya. Solusi yang saya gunakan adalah untuk mengikat acara perubahan ke setiap tombol radio:

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

Atau Anda bisa memberikan semua tombol radio dengan nama yang sama:

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

Berikut ini adalah contoh jsfiddle yang berfungsi (diperbarui dari komentar Chris Porter.)

Per komentar @ Ray, Anda harus menghindari menggunakan nama dengan .di dalamnya. Nama-nama itu berfungsi di jQuery 1.7.2 tetapi tidak di versi lain ( contoh jsfiddle. ).

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

bagian jquery

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

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

di sini adalah DEMO

Anda dapat mengikat ke semua tombol radio sekaligus dengan nama:

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

Contoh kerja di sini: http://jsfiddle.net/Ey4fa/

Ini biasanya bekerja untuk saya:

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

Masalah saya serupa dan ini bekerja untuk saya:

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

Katakanlah tombol-tombol radio berada di dalam divyang memiliki id radioButtonsdan bahwa tombol radio memiliki nama yang sama (misalnya commonName) maka:

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

The changeevent tidak menembaki deselection adalah perilaku yang diinginkan. Anda harus menjalankan pemilih di seluruh grup radio daripada hanya satu tombol radio. Dan grup radio Anda harus memiliki nama yang sama (dengan nilai yang berbeda)

Pertimbangkan kode berikut:

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

Saya memiliki kasus penggunaan yang sama seperti milik Anda yaitu untuk menunjukkan kotak input ketika tombol radio tertentu dipilih. Jika acara ini dipecat saat seleksi, saya akan mendapatkan 2 acara setiap kali.

Masalah yang sama di sini, ini bekerja dengan baik:

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

Dengan Ajax, bagi saya bekerja:

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

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