[英]Enable/Disable textboxes using checkbox inside the table
帮我。 我的代码有问题:
我有这个脚本:
<script>
$('td input[type="checkbox"]').onclick(function () {
$(this).closest('tr').find('input[type="text"]').prop('disable', !this.checked);
}).change();
</script>
和表:
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th></th>
<th>#</th>
<th>Activity Name</th>
<th>SkillsID</th>
<th>Percentage</th>
<th><center>Time Estimate Overhead (min)</center> </th>
<th><center>Time Estimate Per Unit (min)</center></th>
<th><center>Total Time (min)</center></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="others1">
<td>1</td>
<td>Preparation</td>
<td class="center">1,7,8</td>
<td class="center"></td>
<td class="center"><input type="text" id="cb1_teo_text" name="cb1_teo_text" style="width: 100%;" disabled=""></td>
<td class="center"><input type="text" id="cb1_tep_text" name="cb1_tep_text" style="width: 100%;" disabled=""></td>
<td class="center"><span id="totaTime1"/></td>
</tr>
<tr>
<td><input type="checkbox" name="others2"></td>
<td>2</td>
<td>Review of Materials</td>
<td class="center">1,7,8</td>
<td class="center"></td>
<td class="center"><input type="text" name="cb2_teo_text" style="width: 100%;" disabled=""></td>
<td class="center"><input type="text" name="cb2_tep_text" style="width: 100%;" disabled=""></td>
<td class="center"></td>
</tr>
</tbody>
</table>
我只想在选中复选框时启用前两个功能,而在取消选中复选框时禁用前两个功能。
没有.onclick()
事件中jQuery的结合-这是.click()
也是该酒店名称启用和禁用元素是disabled
未disable
。 您还需要将绑定包装在$(document).ready()
块中,以便Javascript不会尝试将事件绑定到尚不存在的元素。
对代码进行的这些更改是使其工作所需的全部。
$(document).ready()
{
$('td input[type="checkbox"]').click(function () {
$(this).closest('tr').find('input[type="text"]').prop('disabled', !this.checked);
}).change();
});
这是一个工作的jsFiddle,显示了这些更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.