为什么不是'；t我的javascript/jquery代码在复选框中按预期工作_Javascript_Jquery_Html_Checkbox

为什么不是'；t我的javascript/jquery代码在复选框中按预期工作

javascript jquery html checkbox

为什么不是'；t我的javascript/jquery代码在复选框中按预期工作,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我有一个代码，我希望我的复选框被选中和禁用。单击“零”时，所有复选框都应高亮显示，除“零”复选框外的所有复选框都应禁用。同样，一个、两个和三个单选按钮也是如此。这似乎并不总是发生。我正在chrome浏览器48.0.2564.116版上试用。而且，这种行为在Firefox上也很可怕。有人能告诉我我做错了什么吗 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.

我有一个代码，我希望我的复选框被选中和禁用。单击“零”时，所有复选框都应高亮显示，除“零”复选框外的所有复选框都应禁用。同样，一个、两个和三个单选按钮也是如此。这似乎并不总是发生。我正在chrome浏览器48.0.2564.116版上试用。而且，这种行为在Firefox上也很可怕。有人能告诉我我做错了什么吗

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("input[name=radio_group]").prop("checked", false);
        $("input[type=radio]").click( function( e ){
           var whats_selected = $("input[name=radio_group]:checked").val()
           $("input[type=checkbox]").attr('checked',false );

         //disable all other checkboxes
         for(i=0; i < 4; i++ ){
           var elem = $("input[type=checkbox][name*=checkbox"+i+"]");
           elem.click();
           if( i != whats_selected ){
             elem.prop("disabled", true);
           }else{
             elem.removeAttr("disabled");
           }
         }
        });
      });
    </script>
  </head>
  <body>
    <h1>Checkbox play</h1>
    <h3>My 4 Radio Buttons</h3>

    <input type="radio" name='radio_group' value=0>Zero<br>
    <input type="radio" name='radio_group' value=1>One<br>
    <input type="radio" name='radio_group' value=2>Two<br>
    <input type="radio" name='radio_group' value=3>Three<br>

    <p>And here are my checkboxes</p>    
    <input type='checkbox' id="chkbox0" name="checkbox0" value="checkbox0">Checkbox Zero<br>
    <input type='checkbox' id="chkbox1" name="checkbox1" value="checkbox1">Checkbox One<br>
    <input type='checkbox' id="chkbox2" name="checkbox2" value="checkbox2">Checkbox Two<br>
    <input type='checkbox' id="chkbox3" name="checkbox3" value="checkbox3">Checkbox Three<br>
  </body>
</html>


$（文档）.ready（函数（）{
$（“输入[名称=无线电组]”）.prop（“选中”，false）；
$（“输入[type=radio]”。单击（函数（e）{
var whats_selected=$（“输入[名称=无线电组]：选中”）.val（）
$（“输入[type=checkbox]”）.attr（'checked'，false）；
//禁用所有其他复选框
对于（i=0；i<4；i++）{
var elem=$（“输入[type=checkbox][name*=checkbox”+i+“]）；
元素单击（）；
如果（i！=所选内容）{
要素道具（“禁用”，真实）；
}否则{
删除要素（“禁用”）；
}
}
});
});
复选框播放
我的4个单选按钮
零

一个

两个

三个

这是我的复选框
复选框零

复选框一

复选框二

复选框三

我认为这应该可以解决问题（如果我没有弄错你的问题）

查看演示：

这里是另一种方法，匹配收音机/复选框对的索引：

var-ndx；
$（文档）.ready（函数（）{
$（“输入[type=radio]”。单击（函数（）{
ndx=$（“输入[type=radio]”）。索引（此）；
$（“输入[type=checkbox]”）。attr（'checked'，true）。prop（'disabled'，true）；
$（“输入[type=checkbox]”）.eq（ndx）.prop（'disabled'，false）；
});
}); //结束文档。准备就绪


我的4个单选按钮
零


一个


两个


三


这是我的复选框
复选框零


复选框一


复选框二


复选框三

@RejithRKrishnan

prop（）

如果用作setter，则需要属性名称和值。我认为您不需要

$（“输入[name=radio\u group]”）。prop（“选中”，false）--默认情况下，单选按钮应该这样做。否则，+1.0适用于Chrome，但不适用于firefox。Firefox版本是46.0。1@gibberish你是说在小提琴上，对吗？是的，我只是从操作代码中复制了一些内容…@sri_84在Mac上的Firefox 46.0.1中很适合我。你是在测试小提琴还是你自己的（编辑过的）代码？也许有别的东西在干扰……为什么要将ndx设为全局？此外，您假设收音机和复选框的顺序始终相同。这可能在今天起作用，但在我看来并不能证明未来。你是对的——ndx不需要成为一个全球性的公司。当我开始写我的答案时，我本想记住最后一次检查的收音机，但后来就不需要了。此外，我还记得之前的一个问题，这个问题非常相似，可能让这两个问题有点混淆。至于匹配顺序，我只是演示了这个方法，因为OP就是这样做的，所以以防万一。
  $("input[type=radio]").click(function(e) {
    var whats_selected = $(this).val();
    // check an disable all checboxes
    $("input[type=checkbox]")
      .attr('checked', true)
      .prop('disabled', true);
    // enable the targetted checkbox
    $('#chkbox' + whats_selected)
      .prop('disabled', false);
  });