jquery - generic javascript to handle radio button enable/disable -

jquery - generic javascript to handle radio button enable/disable -

i want radio buttons enabled when associated checkbox checked. need help in writing generic javascript code, work checkboxes. have 100 checkboxes, don't want write each id or name manually in javascript code. can code sample presented on how in 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 next pieces of code, not sure how create 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>

try following:

class="snippet-code-js lang-js prettyprint-override">$(function() { $('input[type="checkbox"]') .on('change', checkboxchange) // when alter checkbox .each(checkboxchange); // 1 time when page loads function checkboxchange() { var $checkbox = $(this); $('input[name="' + $checkbox.attr('value') + '"]').prop('disabled', !$checkbox.prop('checked')); } }); class="snippet-code-html lang-html prettyprint-override"><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 mutual attribute value

if radio buttons don't have same name value of checkbox meant disable them, need traverse checkbox changed <tr> contains them, find radio buttons within that.

to that, alter checkboxchange() function follows.

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

javascript jquery html