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


172

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>

kode Anda saat ini hanya akan mendengarkan perubahan tombol radio denganid=r1
Rafay

1
jika id = r2 dipilih, id = r1 harus tidak dipilih? de-seleksi tombol radio tidak ditangkap oleh ini?
antwarpes

2
chk ini mungkin itu akan membantu jsfiddle.net/aqZgs
Rafay

Jangan gunakan removeAttr ('dinonaktifkan'), gunakan prop () untuk mengubah status, lihat jawaban saya .
basic6

Jawaban:


311

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


Solusi jsFiddle diatur ke Mootools alih-alih jQuery dan mencegahnya agar tidak berfungsi. Coba solusi ini untuk melihat perilaku: jsfiddle.net/N9tBx . Saya menambahkan log perubahan dan Anda dapat dengan mudah melihat bahwa acara perubahan tidak diaktifkan ketika tombol radio yang dicentang tidak dicentang karena yang lain dicentang.
Chris Porter

3
Sintaks input "[nama = someRadioGroup]" salah. Sintaks yang benar adalah: "input [name = someRadioGroup]: radio". Juga patut dicatat adalah bahwa metode ini hanya berfungsi di versi 1.7.2 dari JQuery. Bug telah dikirimkan untuk ini. Lihat: jsfiddle.net/zn7q2/2 untuk contoh bug ini jika Anda penasaran.
Ray

@ Ray: Bug hanya muncul untuk nama dengan titik di dalamnya. Tanpa titik itu berfungsi dengan baik, lihat jsfiddle.net/zn7q2/4
Andomar

1
Contoh ini berfungsi dengan titik-titik jika Anda mengubah ke "input [nama = 'DateSearchOptions.Test']" (nama terlampir di antara tanda kutip tunggal): jsfiddle.net/4hTxn
Nullpo

Kode "if ($ (" # myCheckbox "). Attr (" checked "))" Tidak berfungsi untuk saya, saya harus menggunakan "if ($ (" # myCheckbox "). Is (": checked ") ) ".
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'/>                  

bagian jquery

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

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

di sini adalah DEMO


Yang ini berfungsi, tidak seperti yang lain yang telah ditandai sebagai benar: S
William Contestabile

+1. Solusi Andomar berhasil tetapi ini lebih masuk akal bagi saya. Menggunakan pemilih kelas mencegah harus mengubah fungsi jika formulir berubah atau memiliki jumlah bidang yang dinamis. Yay untuk suara necro! (meskipun sekarang 2 tahun kemudian jQuery merekomendasikan penggunaan prop () alih-alih attr (). api.jquery.com/prop )
Travis

8
Harus berubah .attr('checked')menjadi .prop('checked').
Justin

1
Contoh buruk, ini bukan bagaimana hal itu dilakukan. Lihat jawaban saya yang lain untuk menonaktifkan elemen (menghapus atribut salah) .
basic6

22

Anda dapat mengikat ke semua tombol radio sekaligus dengan nama:

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

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


Variasi untuk ini adalah $ ("input formulir: radio"). Ubah (...); dan uji penyangga kondisi tombol radio tertentu ('diperiksa'). Ini sangat berguna saat menggunakan RadioButtonList dinamis di ASP.NET.
Terence Golla


3

Masalah saya serupa dan ini bekerja untuk saya:

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

0

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!');
});

0

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.


0

Masalah yang sama di sini, ini bekerja dengan baik:

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

-1

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

Ini tidak menjawab pertanyaan awal OP. Anda tidak menggunakan jQuery di sini, dan Anda menggunakan PHP untuk menangani logika pemeriksaan, bukan Javascript.
Alex Mulchinock
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.