为什么我的更改复选框不起作用（AJAX）

Question

这就是我的剃刀代码的样子

<form asp-action="Save" asp-controller="ClassesHeld" method="post">
    <input asp-for="ClassHeldId" value="@Model.ClassHeldId" hidden />
    <div class="form-group">
        <label>Student</label>
        <input asp-for="@Model.Student" value="@Model.Student" class="form-control" readonly />
    </div>

    <div class="form-group">
        <label>Grade</label>
        <input id="Grade"asp-for="Grade" type="number" value="@Model.Grade" class="form-control" min="0" max="5" />
    </div>

    <div class="form-group">
        <label>Attendance</label>
        <input id="Attendance" class="form-check-input" asp-for="Attendance" type="checkbox"/>
    </div>

    <button class="btn btn-primary" type="submit" value="Save">Save</button>
</form>

<script>
    $("#Attendance").on("change", function () {
        $("#Grade").attr("disabled", this.checked);
    });
</script>

但是由于某种原因，单击复选框根本没有任何作用。 我也用简单的脚本尝试过，但这也不起作用。

    document.getElementById('Attendance').onchange = function () {
    document.getElementById('Grade').disabled = this.checked;
}; 

这些都不起作用。

我什至从这里复制了一些解决方案（其中一个是使用document.getElementbyId的最后一个简单的脚本，没有一个起作用。我必须缺少一些简单的东西，但是过去一个小时我一直在研究它，我仍然无法弄清楚。

对于这个问题是愚蠢的还是菜鸟级的，我深表歉意。 但是我越来越绝望了。

编辑：只需添加更多信息，此表单在提交数据时就可以很好地工作，控制器将内容保存到数据库中...一切正常，只是如果学生未参加，则它会禁用编辑成绩的部分。

因此，目标是在选中“出勤”复选框时禁用输入字段

Answer 1

.attr（）方法仅管理字符串。 因此，如果您想更改属性（如已禁用），或者甚至要检查布尔值或其他内容，都必须使用prop方法。

有关更多信息，请查看此帖子： .prop（）与.attr（）

您可以执行以下代码段。

  $("#Attendance").on("change", function () { $("#Grade").prop("disabled", this.checked) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form asp-action="Save" asp-controller="ClassesHeld" method="post"> <input asp-for="ClassHeldId" value="@Model.ClassHeldId" hidden /> <div class="form-group"> <label>Student</label> <input asp-for="@Model.Student" value="@Model.Student" class="form-control" readonly /> </div> <div class="form-group"> <label>Grade</label> <input id="Grade"asp-for="Grade" type="number" value="@Model.Grade" class="form-control" min="0" max="5" /> </div> <div class="form-group"> <label>Attendance</label> <input id="Attendance" class="form-check-input" asp-for="Attendance" type="checkbox"/> </div> <button class="btn btn-primary" type="submit" value="Save">Save</button> </form> <script> </script> 

Answer 2

我认为您实际上不需要时就需要删除禁用的属性。 也许试试这个：

$(document).ready(function() {
    $("#Attendance").on("change", function () {
        if (this.checked) {
               $("#Grade").attr("disabled", true);
        } else {
               $("#Grade").removeAttr("disabled");
        }
    });
});