0

具有 4 列的 html 表单前 2 列是输入框内的大小，禁用 ='disabled'，当他们单击单选按钮选择大小时，会出现一个复选框，当他们单击该复选框时，我想更改类并禁用 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);
});

提前感谢您的帮助。

4

2 回答 2

0

根据jQuery's FAQ你可以使用

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

请注意，尽管您.parent("tr")可能不是最好的主意，因为它可能模棱两可。更具体（上课或其他）。

于 2011-01-15T18:46:58.910 回答
0

带有答案的简化问题在这里设置 attr of input on this row，以防其他人遇到此问题

于 2011-01-15T19:35:15.283 回答