[英]How can remove read-only attribute from javascript
I have a checkbox in a span tag and input number.我在跨度标签和输入数字中有一个复选框。 Initially the input number is read-only, When the checkbox is being ticked, remove the read only attribute of the Input number which is just close to checkbox.
最初输入的数字是只读的,当勾选复选框时,删除靠近复选框的输入数字的只读属性。 Here is my code.
这是我的代码。 Any help would be appreciated
任何帮助,将不胜感激
<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>
I think you do more trouble than necessary to handle everything.我认为你做的麻烦比处理所有事情所需要的要多。
next
to get that element.next
来获取该元素。 So in the following example what I did was:所以在下面的例子中,我所做的是:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.