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" name="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"> </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.
