如何在 jQuery 中启用/禁用表格行

Question

在 jQuery 中是否有一个预制函数，当您单击一个按钮时，它将启用一行。然后，如果您再次单击它，它将禁用该行。我发现了 toggle() 和 toggleClass()。但是它在调用函数时确实有效。想法有点像这样，但我知道语法是错误的。

jQuery

function disableRows(){
$("#test1table tbody tr").each(function() {
    $(this).find('input:text').prop('disabled', true);
});

function enableRows(){
$("#test1table tbody tr").each(function() {
    $(this).find('input:text').prop('disabled', false);
});

$(document).ready(function() {
  $('.yearButt').click(function(){
      $(this).toggleClass(enableRows(), disableRows());
  });
}); 

Answer 1

使用toggle而不是toggleClass，toggle会在每次点击事件时交替调用函数

$(document).ready(function() {
  $('.yearButt').toggle(
      function() { enableRows(); }, 
      function() { disableRows(); }
    );
  });
});

您还可以通过删除循环并为所需元素使用适当的选择器来优化启用禁用代码

$("#test1table").find("input,button,textarea,select").attr("disabled", "disabled");

或this

Answer 2

我认为下面的代码可以帮助你理解需求：

参考：Enable Disable Controls in a table row

$(document).on('change', '.chkView', function() {
    $(this).closest('tr').find('.chkEdit, .chkDelete').prop('disabled', !this.checked);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

您可以简化代码：

$(document).ready(function() {
    $('.yearButt').click(function(){
        var enabled = parseInt($(this).data('enabled'));
        $("#test1table tbody tr input:text").prop('disabled', enabled );

        $(this).data('enabled', !enabled)
    });
}); 

Answer 4

首先，您要查找的是.toggle()，而不是.toggleClass() :)

那么……

这不是你所期望的：

$(this).toggle(enableRows(), disableRows());

这是立即调用两个函数，然后根据这些函数的结果进行切换。 （两者都是undefined。）您不想执行函数，而只想引用函数，以便.toggle()将根据其逻辑执行它们：

$(this).toggle(enableRows, disableRows);

注意：如果您的代码 sn-p 是完整的，那么您也忘记了在每个函数之后关闭 }。简单的错字。