jQuery 在表行中启用禁用控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22745903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable Disable Controls in a table row
提问by Ruby
I would like to enable the edit&delete checkboxes of that row, when the respective chkView is checked and disable them if it is unchecked. This code is not firing at all in the first place. Where am i going wrong.
我想在选中相应的 chkView 时启用该行的编辑和删除复选框，如果未选中则禁用它们。这段代码一开始根本没有触发。我哪里错了。
HTML
HTML
<table id="table_forms">
<tr>
<td><input type="checkbox" class="chkView"/>View</td>
<td><input type="checkbox" class="chkEdit" disabled/>Edit</td>
<td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
</tr>
<tr>
<td><input type="checkbox" class="chkView"/>View</td>
<td><input type="checkbox" class="chkEdit" disabled/>Edit</td>
<td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
</tr>
</table>
JS:
JS：
$(document).on('change','.chkView',function(){
var row = $(this).closest('tr');
if($(this).prop("checked",true))
{
$(row).find('.chkEdit').prop("disabled",false);
$(row).find('.chkDelete').prop("disabled",false);
}
else
{
$(row).find('.chkEdit').prop("disabled",true);
$(row).find('.chkDelete').prop("disabled",true);
}
});
采纳答案by RGS
$(document).on('change','.chkView',function(){
var row = $(this).closest('tr');
if($(this).is(':checked'))
{
$(row).find('.chkEdit,.chkDelete').prop("disabled",false);
}
else
{
$(row).find('.chkEdit,.chkDelete').prop("disabled",true);
}
});
You are missing '.'in the selector class.
你缺少'.' 在选择器类中。
Demo:
演示：
回答by dfsq
Try this:
尝试这个：
$(document).on('change', '.chkView', function() {
$(this).closest('tr').find('.chkEdit, .chkDelete').prop('disabled', !this.checked);
});
Demo: http://jsfiddle.net/75rVH/3/
演示：http: //jsfiddle.net/75rVH/3/
Also for consistency sake if it's possible that some of .chkViewload already checked you need to make sure you trigger change event on them to make corresponding edit and delete behave properly $('.chkView:checked').change();(demo).
同样为了保持一致性，如果可能.chkView已经检查了一些负载，您需要确保在它们上触发更改事件以使相应的编辑和删除行为正确$('.chkView:checked').change();（演示）。
回答by Mark Schultheiss
This is a pretty old question but to reflect best practice I am adding this.
这是一个很老的问题，但为了反映最佳实践，我添加了这个。
This should attach the event handler as close as possible to the checkbox elements as we can to avoid traversing the entire DOM. Since we have an id, that will be the fastest and since it must be unique we can guarantee it is definitive.
这应该尽可能地将事件处理程序附加到复选框元素，以避免遍历整个 DOM。因为我们有一个 id，这将是最快的，并且因为它必须是唯一的，所以我们可以保证它是确定的。
It should also only target elements that are of the "checkbox" input type [type=checkbox]to protect from cases where a class might be added to other HTML such as the td, tror even some element outside the scope of the table.
它还应该只针对“复选框”输入类型的元素，[type=checkbox]以防止类可能被添加到其他 HTML 的情况下，例如td，tr甚至是表格范围之外的某些元素。
For completeness you might also consider "unchecking" the disabled elements - depending upon use I would expect that to often be the desired action inside a form you post for example, so I added that.
为了完整起见，您还可以考虑“取消选中”禁用的元素 - 根据使用情况，我希望这通常是您发布的表单中所需的操作，因此我添加了它。
$('#table_forms').on('change', '.chkView[type=checkbox]', function(event) {
// added to enable the uncheck on disable when they are checked
let viewCheck = $(this);
let isViewChecked = !!viewCheck.prop('checked');
let isViewDisbled = !!viewCheck.prop('disabled');
let rowChecks = viewCheck
.closest('tr')
.find('.chkEdit[type=checkbox], .chkDelete[type=checkbox]');
// force view to unchecked if it is checked and disabled (optional depends on requirement, might not ever happen)
viewCheck.filter(':checked').prop('checked', !isViewDisbled);
// show if View is checked
rowChecks.prop('disabled', isViewDisbled || (!isViewChecked && !isViewDisbled));
// turn off checked if it is on and View is disabled
rowChecks.filter(function(index, checkbox) {
return isViewDisbled || (!isViewChecked && $(checkbox).is(':checked'));
})
.prop('checked', false);
// turn off checked if it is on and View is disabled
rowChecks.filter(function(index, checkbox) {
return isViewDisbled && $(checkbox).is(':checked');
}).prop('checked', false);
}).find('.chkView[type=checkbox]').filter(function(index, element) {
return !!$(element).siblings('input[type=checkbox]');
}).trigger('change'); // setup initial if they are disabled<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table id="table_forms">
<tr>
<td><input type="checkbox" class="chkView" checked disabled />View</td>
<td><input type="checkbox" class="chkEdit" checked disabled/>Edit</td>
<td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
</tr>
<tr>
<td><input type="checkbox" class="chkView" />View</td>
<td><input type="checkbox" class="chkEdit" disabled/>Edit</td>
<td><input type="checkbox" class="chkDelete" disabled/>Delete</td>
</tr>
</table>