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

Question

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

查询

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());
  });
});

原文由 Kael Jasper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 toggle 而不是 toggleClass，toggle 将在每个点击事件上交替调用函数

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

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

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

或者 这个

原文由 Anil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以简化代码：

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

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

原文由 Justinas 发布，翻译遵循 CC BY-SA 3.0 许可协议