处理单选按钮启用/禁用的通用javascript

我希望仅当选中关联的复选框时才启用单选按钮。因此，我需要帮助编写一个通用javascript代码，它将适用于所有复选框。我有大约100个复选框，所以我不想在javascript代码中手动编写每个ID或名称。能否提供一个代码示例，说明如何以通用方式执行此操作

<form name=registration>
<table border=1>
<tr>
    <td><input type='checkbox' id='c1' name=selcourse value='2-PM-030' onChange="enabledSDF(1,this.value);"> Microsoft Project 2013 </td>
    <td>&nbsp;</td><td><input type=radio id=cd name='2-PM-030' value='Dec 11-12'>Dec 11-12</td>
    <td><input type=radio id=c1d1 name='2-PM-030' value='Jan 26-27'>Jan 26-27</td><td>&nbsp;</td>
    <td>&nbsp;</td><td>&nbsp;</td>
</tr>

<tr>
    <td><input type='checkbox' id='c2' name=selcourse value='2-PM-050'> Microsoft Project 2010 </td>
    <td><input type=radio id=c2d1 name='2-PM-050' value='Nov 24-25'>Nov 24-25</td>
    <td><input type=radio id=c2d2 name='2-PM-050' value='Dec 18-19'>Dec 18-19</td>
    <td><input type=radio id=c2d3 name='2-PM-050' value='Jan 29-30'>Jan 29-30</td>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
</form>

微软项目2013
12月11日至12日
一月二十六日至二十七日
微软项目2010
11月24-25日
12月18日至19日
一月二十九日至三十日

我发现了以下代码片段，但我不确定如何使其通用

<script type="text/javascript">
$(window).load(function(){
$(document).ready(function()

function enabledSDF(i,value){
    var form = document.registration;
    if(document.getElementById('course_type').value=='C')
    {
            if (value=="Singaporean"){
                document.getElementById("sdf"+i+"0").disabled='';
                document.getElementById("sdf"+i+"1").disabled='';
            }
            else{
                document.getElementById("sdf"+i+"0").disabled='disabled';
                document.getElementById("sdf"+i+"1").disabled='disabled';
            }
    }
}

$(document).ready(function() 
{

    $("#email_acc").click(function()
    { 
        if ( $(this).is(":checked") ) 
        {  
            $("input[name='radio_email']").removeAttr("disabled");

        }else {

            $("input[name='radio_email']").attr ( "disabled" , true );
        }
    });  

    $("#sys_acc").click(function()
    {
        if ( $(this).is(":checked") )
        {   
            $("input[name='radio_system']").removeAttr("disabled");
        } else {

            $("input[name='radio_system']").attr ( "disabled" , true );
        }
    }); 
});
</script>

$（窗口）。加载（函数（）{
$（文档）.ready（函数（）
功能启用DSDF（i，值）{
var form=document.registration；
if（document.getElementById（'course_type'）。value=='C'）
{
如果（值=“新加坡人”）{
document.getElementById（“sdf”+i+“0”）.disabled=''；
document.getElementById（“sdf”+i+“1”）。disabled=''；
}
否则{
document.getElementById（“sdf”+i+“0”）.disabled='disabled'；
document.getElementById（“sdf”+i+“1”）.disabled='disabled'；
}
}
}
$（文档）.ready（函数（）
{
$（“#email_acc”）。单击（函数（）
{ 
如果（$（this）.is（“：checked”））
{  
$（“input[name='radio_email']）。removeAttr（“禁用”）；
}否则{
$（“input[name='radio_email']”）attr（“disabled”，true）；
}
});  
$（“#系统_acc”）。单击（函数（）
{
如果（$（this）.is（“：checked”））
{   
$（“input[name='radio_system']）。removeAttr（“disabled”）；
}否则{
$（“input[name='radio\u system']”）attr（“disabled”，true）；
}
}); 
});

尝试以下操作：

$（函数（）{
$（'input[type=“checkbox”]”）
.on（'change'，checkboxChange）//更改复选框时执行此操作
.each（checkboxChange）；//以及加载页面时的一次
函数checkboxChange（）{
var$checkbox=$（此项）；
$（'input[name=“”+$checkbox.attr（'value'）+'“]'））.prop（'disabled'，！$checkbox.prop（'checked'））；
}
})；

微软项目2013
12月11日至12日
一月二十六日至二十七日
微软项目2010
11月24-25日
12月18日至19日
一月二十九日至三十日

HTML：

  <form name=registration>
<table border=1>
<tr>
    <td><input type='checkbox' class="des" data-year='2013' name=selcourse value='2-PM-030'> Microsoft Project 2013 </td>
    <td>&nbsp;</td><td><input type=radio class="2013" name='2-PM-030' value='Dec 11-12'>Dec 11-12</td>
    <td><input type=radio class="2013" name='2-PM-030' value='Jan 26-27'>Jan 26-27</td><td>&nbsp;</td>
    <td>&nbsp;</td><td>&nbsp;</td>
</tr>

<tr>
    <td><input type='checkbox' class="des" data-year='2010' name=selcourse value='2-PM-050'> Microsoft Project 2010 </td>
    <td><input type=radio class="2010" name='2-PM-050' value='Nov 24-25'>Nov 24-25</td>
    <td><input type=radio class="2010" name='2-PM-050' value='Dec 18-19'>Dec 18-19</td>
    <td><input type=radio class="2010" name='2-PM-050' value='Jan 29-30'>Jan 29-30</td>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
</form>

---

如果您已经在使用jquery，最好利用它

非常感谢GregL。非常感谢。它工作得很好。但是我无法理解当代码只检查复选框字段时单选按钮是如何被取消的。单选按钮和复选框之间的关系是复选框的

值

属性等于单选按钮的

名称

属性函数查找与相关复选框的

值

相等的

名称的单选按钮，如果未选中该复选框，则禁用它们。现在有意义了吗？谢谢GregL。但是如果单选按钮名称与复选框的值不相同，您会推荐什么？@vinai查看对我的问题的编辑。这就是pr老实说，这可能是一个更好的方法。谢谢Greg。这非常有效。感谢你的快速工作。好吧，最好使用
.prop（'disabled'，）
而不是
.attr（'disabled'，'true'））
。disabled属性的存在并不总是与disabled属性对应，disabled属性控制复选框的禁用状态。
$('.des').on('change', function () {
  var type = $(this).data('year');
  if(this.checked){
    $('.' + type).attr('disabled', 'true');
  } else {
    $('.' + type).removeAttr( "disabled" );
  }
});