jQuery $ (Tiếng Nhật # radioButton). Thay đổi (Nhận) không kích hoạt trong quá trình hủy chọn

Khoảng một tháng trước, câu hỏi của Mít không được trả lời. Đáng buồn thay, bây giờ tôi đang rơi vào tình huống tương tự.

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

Đây là tình huống: Tôi đang sử dụng jQuery để nắm bắt các thay đổi trong nút radio. Khi nút radio được chọn, tôi kích hoạt hộp chỉnh sửa. Khi nút radio được bỏ chọn, tôi muốn hộp chỉnh sửa bị tắt.

Các công trình cho phép. Khi tôi chọn một nút radio khác trong nhóm, changesự kiện sẽ không được kích hoạt. Có ai biết làm thế nào để sửa lỗi này?

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

Có vẻ như change()chức năng chỉ được gọi khi bạn kiểm tra nút radio, không phải khi bạn bỏ chọn nó. Giải pháp tôi đã sử dụng là liên kết sự kiện thay đổi với mọi nút radio:

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

Hoặc bạn có thể đặt cho tất cả các nút radio cùng tên:

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

Đây là một ví dụ jsfiddle hoạt động (được cập nhật từ nhận xét của Chris Porter.)

Nhận xét của mỗi @ Ray, bạn nên tránh sử dụng tên có .trong đó. Các tên đó hoạt động trong jQuery 1.7.2 nhưng không phải trong các phiên bản khác ( ví dụ 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'/>                  

phần jquery

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

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

đây là DEMO

Bạn có thể liên kết với tất cả các nút radio cùng một lúc bằng tên:

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

Ví dụ hoạt động tại đây: http://jsfiddle.net/Ey4fa/

Điều này thường làm việc cho tôi:

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

Vấn đề của tôi là tương tự và điều này làm việc cho tôi:

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

Giả sử các nút radio đó nằm trong một divid có id radioButtonsvà các nút radio có cùng tên (ví dụ commonName) sau đó:

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

Sự changekiện không nổ súng vào sự sa đọa là hành vi mong muốn. Bạn nên chạy bộ chọn trên toàn bộ nhóm radio thay vì chỉ một nút radio. Và nhóm radio của bạn phải có cùng tên (với các giá trị khác nhau)

Hãy xem xét các mã sau đây:

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

Tôi có trường hợp sử dụng tương tự như của bạn tức là để hiển thị hộp nhập khi chọn một nút radio cụ thể. Nếu sự kiện cũng bị hủy khi chọn, tôi sẽ nhận được 2 sự kiện mỗi lần.

Vấn đề tương tự ở đây, điều này đã làm việc tốt:

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

Với Ajax, đối với tôi đã làm việc:

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

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