[英]How to disable all input when checkbox is checked on load with jquery
I want the input
each tr
disabled if its checkbox
is unchecked - on page load.如果未选中
checkbox
我希望每个tr
的input
都被禁用 - 在页面加载时。 As I understand, I have to call a function to check if the checkbox
was checked.据我了解,我必须调用一个函数来检查,如果
checkbox
被选中。 But as my code below, it's not working.但正如我下面的代码,它不起作用。
$(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>
I want all the input
in each row tr
disabled when load if its checkbox
is empty.如果
checkbox
为空,我希望在加载时禁用每行tr
所有input
。
You can use the .form-check-input:not(:checked)
selector to select all checkboxes that are not checked.您可以使用
.form-check-input:not(:checked)
选择器来选择所有未选中的复选框。
$(function() { $('.form-check-input:not(:checked)').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>
To do what you require you can simply trigger()
your change
event handler on the checkboxes when the page loads.要执行您的要求,您可以在页面加载时简单地在复选框上
trigger()
您的change
事件处理程序。
Two other things to note here.这里要注意另外两件事。 Firstly, the logic there can be simplified by providing the inverse
checked
property state to the prop('disabled')
call.首先,可以通过向
prop('disabled')
调用提供反向checked
属性状态来简化那里的逻辑。 Secondly, be careful when placing your event handlers outside document.ready.其次,将事件处理程序放在 document.ready 之外时要小心。 If you've put the jQuery code in the
head
of the page you encounter issues with the event not being bound.如果您将 jQuery 代码放在页面的
head
,您会遇到未绑定事件的问题。
With all that said, try this:说了这么多,试试这个:
jQuery($ => { $(".form-check-input").on('change', e => { $(e.target).closest('tr').find('input.form-control').prop('disabled', !e.target.checked); }).trigger('change'); });
.form-control { width: 50px; }
<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>
You can leverage your existing function and just trigger a 'change' event on load.您可以利用现有功能并在加载时触发“更改”事件。 You can also shorten your function by setting disabled to
!$(this).is(':checked')
您还可以通过将 disabled 设置为
!$(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')); });
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.