generic javascript to handle radio button enable/disable

Question

I want the radio buttons to be enabled only when the associated checkbox is checked. So I need help in writing a generic javascript code, which will work for all the checkboxes. I have about 100 checkboxes, so I don't want to write each ID or name manually in the javascript code. Can a code sample be presented on how to do this in a generic way.

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

I found the following pieces of code, but I am not sure how to make it generic.

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

Answer 1

Try the following:

$(function() {
  $('input[type="checkbox"]')
    .on('change', checkboxChange) // do it when you change the checkbox
    .each(checkboxChange); // as well as once when the page loads

  function checkboxChange() {
    var $checkbox = $(this);
    $('input[name="' + $checkbox.attr('value') + '"]').prop('disabled', !$checkbox.prop('checked'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

EDIT: If not linked by common attribute value

If the radio buttons don't have the same name as the value of the checkbox that is meant to disable them, then you would need to traverse from the checkbox that was changed to the <tr> that contains them, then find the radio buttons within that.

To do that, just change my checkboxChange() function as follows.

function checkboxChange() {
    var $checkbox = $(this);
    $checkbox.closest('tr').find('input[type=radio]').prop('disabled', !$checkbox.prop('checked'));
}

Answer 2

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>

javascript:

$('.des').on('change', function () {
  var type = $(this).data('year');
  if(this.checked){
    $('.' + type).attr('disabled', 'true');
  } else {
    $('.' + type).removeAttr( "disabled" );
  }
});

if you already are using jquery, it's better if you take advantage of that