我想要这个 input 每个 tr 如果其 checkbox 未选中-页面加载时。据我所知，我必须调用一个函数来检查 checkbox 检查过了。但正如我下面的代码所示，它不起作用。
$(function() {
fn_chkBox('.form-check-input'); //see if checked on load
function fn_chkBox() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else {
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
}
});
$(".form-check-input").change(function() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else { //unchecked
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>我要所有的钱 input 每行 tr 如果其 checkbox 是空的。
3条答案
按热度按时间omhiaaxx1#
你可以使用
.form-check-input:not(:checked)选择器选择所有未选中的复选框。3zwtqj6y2#
要做你需要的事，你可以
trigger()你的change页面加载时复选框上的事件处理程序。还有两件事需要注意。首先，可以通过提供逆矩阵来简化逻辑
checked将属性状态添加到prop('disabled')呼叫其次，在将事件处理程序放在document.ready之外时要小心。如果您已将jquery代码放入head您遇到未绑定事件的问题的页面。说了这么多，试试这个：
nfs0ujit3#
您可以利用现有功能，只需在加载时触发“更改”事件。您还可以通过将“禁用”设置为来缩短功能
!$(this).is(':checked')```$(function() {
$('input[type=checkbox]').trigger('change')
});
$(".form-check-input").change(function() {
$(this).closest("tr").find("input.form-control").prop("disabled", !$(this).is(':checked'));
});