Question

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

<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's FAQ你可以使用

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

注意虽然你的.parent("tr")可能不是最好的主意，因为它可能含糊不清。更具体（给出类或其他东西）。

Answer 2

带答案的简化问题在set attr of inputs on this row，以防其他人遇到此问题

点击复选框设置输入attr

2 个答案: