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

您可以简化代码：

$(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 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

首先，您正在寻找.toggle()，而不是.toggleClass()：）

则...

这不符合您的期望：

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

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

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

注意：如果您的代码段已完成，那么您也忘记了在每个功能之后关闭}。简单的错字。

Answer 4

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

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

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

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

或this

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

4 个答案: