Checkboxes as Radio Buttons disabling table rows
This uses checkboxes instead of radio buttons (constraint due to payment system) and enables only text areas in the row that is checked.
It uses tables, but could easily move to being divs (easier for designer).
HTML
<!--<input type="text" disabled="disabled" /><input type="checkbox" />-->
<table id="table1">
<tr bgcolor="#E2E2E2">
<td class="tablehead"><img src="/images/blank.gif" alt=" " /></td>
<td class="tablehead"><strong>Membership type</strong></td>
<td class="tablehead"><strong>Totalcvcvcv</strong></td>
</tr>
<tr valign="top">
<td align="center" rowspan="2"><input name="op_mem_comf" id="op_mem_comf" class='child' type="checkbox" value="1" onBlur="CheckField(this.form,this,'');" onClick="javascript:if(document.getElementById('op_mem_comf').checked == true) {document.getElementById('op_mem_comf').value = 1;} else {document.getElementById('op_mem_comf').value = 0;}; CheckField(this.form,this,'');calc_subtotal('<%=amt_com_famdec%>',this,document.webcredit.line_total1);genericCalc(this.form, this, 'line_total', 1, 6, 'Total', 2, 2);genericCalc(this.form, this, 'line_total', 1, 6, 'OP_MEMB', 2, 2);" /></td>
<td rowspan="2"><b>Community Family - $<%=amt_com_fam%> up to 4 family members</b><br />
If family size is greater than 4, enter the number of additional family members ($10.00 each): <input type="text" name="op_mem_comf_add" id="op_mem_comf_add" size="5" maxlength="5" value="" class='child' onblur="javascript:calc_subtotal('10.00',this,document.webcredit.line_total2); genericCalc(this.form, this, 'line_total', 1, 6, 'Total', 2, 2); genericCalc(this.form, this, 'line_total', 1, 6, 'OP_MEMB', 2, 2); trim(this); zero(this)" onchange="zero(this)" /><br />
<span class="a-small"><b>NOTE:</b> (All family members must be listed as dependents on the 2010 Federal Income Tax Return.)</span></td>
<td align="center">$<input name="line_total1" type="text" class='child' id="line_total1"...
CSS
.greyedOut {
color:#CCC
}
JavaScript
$("#table1 :checkbox").click(function() {
var $this = $(this);
if (!$this.is(':checked')) {
//show everything
$this.closest('tr').removeClass('greyedOut')
.find(":input[type='text']").removeAttr('disabled').end()
.siblings().removeClass('greyedOut').find(":input").removeAttr('disabled');
} else {
//only show parent, disable everything else!
$this.closest('tr').removeClass('greyedOut')
.find(":input[type='text']").removeAttr('disabled').end()
.siblings().addClass('greyedOut')
.find(":input").attr('disabled','disabled').end() //back to siblings
.find(":checkbox").removeAttr("checked");
}
});