jQuery $ (“ # radioButton”). change (…) ไม่ทำการยิงระหว่างการยกเลิกการเลือก

ประมาณหนึ่งเดือนที่ผ่านมาคำถามของ Mitt ยังไม่ได้รับคำตอบ น่าเศร้าที่ฉันกำลังตกอยู่ในสถานการณ์เดียวกันตอนนี้

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

นี่คือสถานการณ์: ฉันใช้ jQuery เพื่อบันทึกการเปลี่ยนแปลงในปุ่มตัวเลือก เมื่อเลือกปุ่มตัวเลือกฉันจะเปิดใช้งานกล่องแก้ไข เมื่อยกเลิกการเลือกปุ่มตัวเลือกฉันต้องการให้กล่องแก้ไขถูกปิดใช้งาน

การเปิดใช้งานใช้งานได้ เมื่อฉันเลือกปุ่มตัวเลือกอื่นในกลุ่มchangeเหตุการณ์จะไม่เริ่มทำงาน ไม่มีใครรู้วิธีการที่จะแก้ไขปัญหานี้?

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

ดูเหมือนว่าchange()ฟังก์ชั่นจะถูกเรียกเมื่อคุณตรวจสอบปุ่มตัวเลือกไม่ใช่เมื่อคุณยกเลิกการเลือก โซลูชันที่ฉันใช้คือผูกเหตุการณ์การเปลี่ยนแปลงกับปุ่มตัวเลือกทุกปุ่ม:

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

หรือคุณสามารถตั้งชื่อปุ่มทั้งหมดให้เป็นชื่อเดียวกัน:

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

นี่คือตัวอย่าง jsfiddle ที่ใช้งานได้(อัปเดตจากความคิดเห็นของ Chris Porter)

ความคิดเห็นของ Per @ Ray คุณควรหลีกเลี่ยงการใช้ชื่อกับ.พวกเขา ชื่อเหล่านั้นทำงานใน jQuery 1.7.2 แต่ไม่ได้อยู่ในเวอร์ชันอื่น ( ตัวอย่าง 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'/>                  

ส่วน jquery

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

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

นี่คือDEMO

คุณสามารถผูกปุ่มตัวเลือกทั้งหมดในครั้งเดียวด้วยชื่อ:

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

ตัวอย่างการทำงานที่นี่: http://jsfiddle.net/Ey4fa/

ปกติใช้งานได้สำหรับฉัน:

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

ปัญหาของฉันคล้ายกันและสิ่งนี้ใช้ได้กับฉัน:

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

สมมติว่าปุ่มตัวเลือกเหล่านั้นอยู่ภายใน a divที่มี ID radioButtonsและปุ่มตัวเลือกมีชื่อเดียวกัน (ตัวอย่างcommonName) จากนั้น:

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

changeเหตุการณ์ไม่ยิงไม่เลือกเป็นพฤติกรรมที่ต้องการ คุณควรเรียกใช้ตัวเลือกเหนือกลุ่มวิทยุทั้งหมดแทนที่จะเป็นเพียงปุ่มตัวเลือกเดียว และกลุ่มวิทยุของคุณควรมีชื่อเหมือนกัน (มีค่าต่างกัน)

พิจารณารหัสต่อไปนี้:

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

ฉันมีกรณีการใช้งานเช่นเดียวกับคุณคือการแสดงกล่องอินพุตเมื่อเลือกปุ่มตัวเลือก ถ้าเหตุการณ์ถูกไล่ออกจากการยกเลิกการเลือกฉันก็จะได้รับ 2 เหตุการณ์ในแต่ละครั้ง

ปัญหาเดียวกันที่นี่ทำงานได้ดี:

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

ด้วย Ajax สำหรับฉันทำงาน:

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

และ 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> ";