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

Question

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

Answer 1

我会将一个函数绑定到复选框，然后在此函数中，如果选中了复选框，您将找到closest父级<tr>并将每个子级设为只读（不要担心复选框本身，您仍然可以再次取消选中它们。更多信息这个）<input><tr><input>试试这个片段$("table input.makeReadOnly").change(function (){&nbsp; &nbsp; if($(this).prop("checked")){&nbsp; &nbsp; &nbsp; &nbsp;$(this).closest("tr").find("input").prop("readonly", true);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp;$(this).closest("tr").find("input").prop("readonly", false);&nbsp; &nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><table>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td><input></td>&nbsp; &nbsp; &nbsp; &nbsp; <td><input></td>&nbsp; &nbsp; &nbsp; &nbsp; <td><input class="makeReadOnly" type="checkbox"></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td><input></td>&nbsp; &nbsp; &nbsp; &nbsp; <td><input></td>&nbsp; &nbsp; &nbsp; &nbsp;<td><input class="makeReadOnly" type="checkbox"></td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>

Answer 2

您可以遍历页面上的复选框，然后从那里导航到 tr 属性？但是，如果没有任何代码示例，很难理解，而且我对 SO 太陌生，无法发表评论。&nbsp;var inputs = form.getElementsByTagName("input");&nbsp;for (var i = 0; i < inputs.length; i++) {&nbsp; &nbsp;if ($(inputs[i]).type == "checkbox" && $(inputs[i]).is(':checked')){&nbsp; &nbsp; &nbsp;$(inputs[i]).closest('tr').prop('readonly', true);&nbsp; &nbsp;}&nbsp;}可能太冗长并且可能会被追捕，但我认为它可能会有所帮助！