如何使用复选框在获取的表上切换只读属性？

Question

我必须使用复选框来切换表上的只读属性，更准确地说，我正在从数据库中获取表并在每一行中创建一个复选框，该复选框应该在其行上切换只读属性，并且只有在那里。我当时想我可以创建一个 class="row_'.index.'" 并将其附加到自动生成表的每一行，但是我不知道如何在 jQuery 中传递该类以生成切换函数只读...有没有更简单，更清洁的方法？

Answer 1

我会将一个函数绑定到复选框，然后在此函数中，如果选中了复选框，您将找到closest父级<tr>并将每个子级设为只读（不要担心复选框本身，您仍然可以再次取消选中它们。更多信息这个）<input><tr><input>

试试这个片段

$("table input.makeReadOnly").change(function (){

    if($(this).prop("checked")){

       $(this).closest("tr").find("input").prop("readonly", true);

    } else {

       $(this).closest("tr").find("input").prop("readonly", false);

    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<table>

  <tbody>

    <tr>

        <td><input></td>

        <td><input></td>

        <td><input class="makeReadOnly" type="checkbox"></td>

    </tr>

    <tr>

        <td><input></td>

        <td><input></td>

       <td><input class="makeReadOnly" type="checkbox"></td>

    </tr>

  </tbody>

</table>

Answer 2

您可以遍历页面上的复选框，然后从那里导航到 tr 属性？但是，如果没有任何代码示例，很难理解，而且我对 SO 太陌生，无法发表评论。

 var inputs = form.getElementsByTagName("input");

 for (var i = 0; i < inputs.length; i++) {

   if ($(inputs[i]).type == "checkbox" && $(inputs[i]).is(':checked')){

     $(inputs[i]).closest('tr').prop('readonly', true);

   }

 }

可能太冗长并且可能会被追捕，但我认为它可能会有所帮助！