取消选择期间未触发jQuery $(“#radioButton”)。change(...)


173

大约一个月前,米特的问题没有得到解答。可悲的是,我现在遇到了同样的情况。

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>

您当前的代码将仅通过id=r1
Rafay

1
如果选择了id = r2,是否应取消选择id = r1?这样不会捕获单选按钮的取消选择吗?
2011年

2
chk这可能会有所帮助jsfiddle.net/aqZgs
Rafay 2011年

不要使用removeAttr('disabled'),使用prop()来更改状态,请参见我的回答
basic6

Answers:


312

看起来该change()函数仅在您选中单选按钮时才调用,而不是在取消选中它时才调用。我使用的解决方案是将change事件绑定到每个单选按钮:

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

或者,您可以为所有单选按钮赋予相同的名称:

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

这是一个可行的jsfiddle示例(从Chris Porter的评论更新)。

根据@Ray的评论,您应该避免.在其中使用名称。这些名称在jQuery 1.7.2中有效,但在其他版本中则无效jsfiddle示例。)。


jsFiddle解决方案设置为Mootools而不是jQuery,并阻止其运行。尝试以下解决方案以查看行为:jsfiddle.net/N9tBx。我添加了更改日志,您可以轻松地看到未选中选中的单选按钮时选中的单选按钮未触发更改事件。
克里斯·波特

3
输入的“ [name = someRadioGroup]”语法错误。正确的语法是:“ input [name = someRadioGroup]:radio”。另外值得注意的是,该方法仅在1.7.2版的JQuery中有效。已为此提交错误。如果您对此感到好奇,请参阅:jsfiddle.net/zn7q2/2以获取此错误的示例。

@Ray:该错误仅在名称中带有点的名称出现。没有点,它可以正常工作,请参阅jsfiddle.net/zn7q2/4
Andomar

1
如果更改为“ input [name ='DateSearchOptions.Test']”(用单引号引起来的名称),则该示例使用点进行处理:jsfiddle.net/4hTxn
Nullpo 2013年

代码“ if($(“#myCheckbox”)。attr(“ checked”))“对我不起作用,我不得不使用“ if($(”#myCheckbox“)。is(”:checked“) )”。
Bartho Bernsmann '16

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

jQuery部分

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

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

这是演示


这一工作原理与其他已标记为正确的工作原理不同:S
William Contestabile 2012年

+1。Andomar的解决方案有效,但这对我来说更有意义。使用类选择器可以避免在表单更改或字段数量动态的情况下更改函数。是的,死灵票!(虽然现在两年后的jQuery建议使用道具()而不是ATTR()。api.jquery.com/prop
特拉维斯

8
应该更改.attr('checked').prop('checked')
贾斯汀2014年

1
不好的例子,这不是怎么做的。请参阅我关于禁用元素的其他答案(删除属性是错误的)
basic6 2015年

22

您可以按名称一次绑定到所有单选按钮:

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

这里的工作示例:http : //jsfiddle.net/Ey4fa/


$(“ form input:radio”)。change(...);的变化形式 并测试特定的单选按钮条件prop(“选中”)。在ASP.NET中使用动态RadioButtonList时,这非常有用。
Terence Golla


4

我的问题很相似,这对我有用:

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

0

假设这些单选按钮位于div具有id的a内,radioButtons并且这些单选按钮具有相同的名称(例如commonName),然后:

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

0

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个事件。


0

这里同样的问题,这很好用:

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

-1

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

这没有回答OP的原始问题。您这里没有使用jQuery,而是使用PHP处理检查逻辑,而不是Javascript。
Alex Mulchinock
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.