我遇到了一个问题，我有以下 html 结构。
最初，所有文本框均被禁用。
当我勾选第一列中的某个复选框时，我想启用此行中的文本框。
问题是我可以启用除“Tag 02”之外的所有文本框。
我相信 row2 中有一个“rowspan=2”，所以我的代码在 tag02 行中找不到 td 。
我在下面发布了我的代码，有人可以帮我解决这个问题吗？
非常感谢。
<html>
<body>
<table border="1" id="settbl" cellspacing="0" cellpadding="0" width="500">
<thead>
<tr>
<th></th>
<th colspan="2">Setting</th>
<th>Value</th>
<th>Units</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row1</td>
<td><input type="text"/></td>
<td>Units</td>
<td rowspan="10"><button>Edit</button></td>
</tr>
<tr>
<td rowspan="2"><input type="checkbox"/></td>
<td rowspan="2">Row2</td>
<td>Tag 01</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
<tr>
<td>Tag 02</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row3</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
</tbody>
</table>
</body>
</html>
我的代码在这里:
function enableRows(){
$('#settbl tr').filter(':has(:checkbox:checked)').each(function() {
$(this).find('input[type=text],select').each(function() {
this.disabled = false;//only enable "Row1","Row2->Tag01" and "Row3".
});
});
}
最佳答案
您正在使用 $('#settbl tr').filter(':has(:checkbox:checked)') 进行搜索，这意味着它将返回 <tr>选中一个复选框。但在您的代码中，您可以看到 Tag02 的父级 <tr>甚至没有复选框。你应该把 <input>您想要在同一个<tr>内进行检查带有复选框。
<tr>
<td rowspan="2"><input type="checkbox"/></td>
<td rowspan="2">Row2</td>
<td>Tag 01</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
<tr>
<td>Tag 02</td>
<td><input type="text"/></td>
<td>Units</td>
</tr>
您可以尝试此代码。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function enableRows() {
$('#settbl tr').filter(':has(:checkbox:checked)').each(function() {
$(this).find('input[type=text],select').each(function() {
this.disabled = false;
});
});
}
</script>
</head>
<body>
<table border="1" id="settbl" cellspacing="0" cellpadding="0" width="500">
<thead>
<tr>
<th></th>
<th colspan="2">Setting</th>
<th>Value</th>
<th>Units</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row1</td>
<td><input type="text" disabled /></td>
<td>Units</td>
<td rowspan="10"><button>Edit</button></td>
</tr>
<tr>
<td ><input type="checkbox"/></td>
<td >
<table>
<tr>
<td>
Row2
</td>
<tr>
</tr>
<td>
Row2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Tag 01
</td>
<tr>
</tr>
<td>
Tag 02
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<input type="text" disabled /></td>
</td>
<tr>
</tr>
<td>
<input type="text" disabled /></td>
</td>
</tr>
</table>
</td>
<td>
<table >
<tr>
<td>
<td>Units</td>
</td>
<tr>
</tr>
<td>
<td>Units</td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td colspan="2">Row3</td>
<td><input type="text" disabled /></td>
<td>Units</td>
</tr>
</tbody>
</table>
<button onclick="enableRows();">Enable Rows</button>
</body>
</html>
关于jquery - 使用 jquery 启用表格中带有 rowspan 的文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18123469/