单击复选框设置输入属性

Question

具有 4 列的 html 表单，前 2 列是输入框中禁用='禁用'的大小，当他们单击单选按钮选择大小时，会出现一个复选框，当他们单击该复选框时，我想更改类和禁用属性该表行上的输入允许他们编辑输入框

<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">&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();
});

这是我的想法，但它不起作用

$("#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);
});

提前感谢您的任何帮助。

Answer 1

根据 jQuery 的常见问题解答，您可以使用

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

Take note through your .parent( "tr") 可能不是最好的主意，因为它可能不明确。更具体一些（上课什么的）。

Answer 2

带有答案的简化问题位于设置该行输入的属性如果其他人也有这个问题