on click checkbox set input attr

html form with 4 columns the first 2 columns are the sizes inside input boxes with disabled ='disabled', when they click radio button to select a size a checkbox appears, when they click that checkbox I would like to change the class and disabled attr of the inputs on that table row to allow them to edit the input box

<table width="388" border="1" id="product1">
<tr>
<td width="100">Width</td>
<td width="100">Height</td>
<td width="48">Price</td>
<td width="65">Select</td>
</tr>
<tr>
<td><input type="text" disabled='disabled'value="200"/><span> CMS</span></td>
<td><input disabled='disabled'type="text" value="500"/><span> CMS</span></td>
<td>£50.00</td>
<td><input type="radio" name="product1" value="size1" /> Customise<input     type="checkbox"   name="custom[size1]" class="custombox" value="1"/></td>
 </tr>
 <tr>
<td>200</td>
<td>1000</td>
<td>£100.00</td>
<td><input type="radio" name="product1" value="size2" /> Customise<input         disabled='disabled' type="checkbox" nam开发者_运维知识库e="custom[size2]" class="custombox" value="1"/></td>
</tr>
<tr>
<td>200</td>
<td>1500</td>
<td>£150</td>
<td><input type="radio" name="product1" value="size3" /> Customise<input     type="checkbox" name="custom[size3]" class="custombox" value="1"/></td>
</tr>
</table>
<table width="288" border="1" id="product2">
<tr>
<td width="72">Width</td>
<td width="75">Height</td>
<td width="48">Price</td>
<td width="65">&nbsp;</td>
</tr>
 <tr>
<td>200</td>
<td>500</td>
<td>£50.00</td>
<td><input type="radio" name="product2" value="size1" /> Customise<input     type="checkbox" name="custom[size1]" class="custombox" value="1"/></td>
</tr>
<tr>
<td>200</td>
<td>1000</td>
<td>£100.00</td>
<td><input type="radio" name="product2" value="size2" /> Customise<input     type="checkbox" name="custom[size2]" class="custombox" value="1"/></td>
 </tr>
 <tr>
<td>200</td>
<td>1500</td>
<td>£150</td>
<td><input type="radio" name="product2" value="size3" /> Customise<input type="checkbox" name="custom[size3]" class="custombox" value="1"/></td>
 </tr>
<table>

CSS

input[type=checkbox] {
display: none;
}

input[type=checkbox].shown {
display: inline;
}

input .edit{
border:1px solid red;
}
input[disabled='disabled'] {  
border:0px;
width:60px;
padding:5px;
float:left;
background:#fff;
}

span{float:left; width:30px; padding:5px;}

Jquery

 $("body :checkbox").hide();

// The most obvious way is to set radio-button click handlers for each table separatly:
$("#product1 :radio").click(function() {
$("#product1 :checkbox").hide();
  $("#product1 .cbox").hide();
$(this).parent().children(":checkbox").show();
  $(this).parent().children(".cbox").show();
});

$("#product2 :radio").click(function() {
$("#product2 :checkbox").hide();
    $("#product2 .cbox").hide();
$(this).parent().children(":checkbox").show();
$(this).parent().children(".cbox").show();
});

This is what I thought but its not working

$("#product1 :checkbox").click(function(){
$(this).parent("tr").children("td :input").attr('disabled','');
$(this).parent("tr").children("td :input").toggleClass(edit);
});

$("#product2 :checkbox").click(function(){
$(this).parent("tr").children("td :input").attr('disabled','');
$(this).parent("tr").children("td :input").toggleClass(edit);
});

Thanks in advance for any help.

According to jQuery's FAQ you could use

$('#x').attr('disabled', false);
//or
$("#x").removeAttr('disabled');

Take note though your .parent("tr") is probably not the best idea as it could be ambiguous. Be more specific (give classes or something).

Simplified question with answer is here set attr of inputs on this row in case anyone else has this issue