如何从 javascript 中删除只读属性

Question

我在跨度标签和输入数字中有一个复选框。 最初输入的数字是只读的，当勾选复选框时，删除靠近复选框的输入数字的只读属性。 这是我的代码。 任何帮助，将不胜感激

<tr>
    <td>
    <span><input type="checkbox"  asp-for="@Model.attendanceLogList[i].IsNormalAttendance" onclick="SetHrs(this);" /></span>
    <input type="number" readonly="readonly" placeholder="0.00" style="@(columnstyle);width: 5em"
                                       class="form-control format-text emphrs" asp-for="@Model.attendanceLogList[i].NormalHrs"  />
    </td>
</tr>
    <script>
     function SetHrs(element) {
            var rowIndex = $(element).closest("tr").attr('id');      
           if ($(element).is(":checked")) {
    $(this).closest('tr').find('input[type=number]').removeAttr('readonly');   //  Not working
                
            }
        }
    </script>

Answer 1

我认为你做的麻烦比处理所有事情所需要的要多。

1. 不要混合 javascript 和 jQuery。 尽量保持一切整洁，为您的页面块创建某种控制器。 例如在这里你可以有一个表 controller
2. 尝试通过 id 查找元素有点难看，尤其是在使用您希望重复的元素时（例如行）。 如果您确定输入遵循span ，则可以使用 jQuery 的next来获取该元素。

所以在下面的例子中，我所做的是：

1. 使用事件委托附加事件侦听器（从复选框中删除了 onclick 属性）
2. 从事件参数中获取事件目标
3. 使用上面的建议查找只读输入
4. 删除只读属性，只有在复选框被选中时，所以我做了一点改进，如果你关闭复选框，只读将再次添加。

 jQuery(function($) { $("table").on("change", "[name='foo']", function(e){ const $target = $(e.target); const $targetInput = $target.parent().next(); $targetInput[$target.is(":checked")? "removeAttr": "attr"]("readonly", "readonly"); }); });

 table { width: 100%; border: 1px solid #e2e2e2; } input:read-only { border: 1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td> <span> <input name="foo" type="checkbox" /> </span> <input type="number" readonly="readonly" placeholder="0.00" /> </td> </tr> </tbody> </table>