선택 해제 중 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의 의견에서 업데이트되었습니다).

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

여기 데모가 있습니다

이름별로 모든 라디오 버튼을 한 번에 바인딩 할 수 있습니다.

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

실제 예제 : http://jsfiddle.net/Ey4fa/

이것은 일반적으로 나를 위해 작동합니다 :

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

내 문제는 비슷했고 이것은 나를 위해 일했다 :

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

해당 라디오 버튼이 divID를 가진 안에 있고 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>

자바 스크립트 :

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