为什么我的更改复选框不起作用（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() 方法只管理字符串；所以如果你想改变一个属性，比如 disabled 甚至用布尔值或其他东西检查，你必须使用 prop 方法。

有关更多信息，请查看此帖子： .prop() vs .attr()

你可以执行下面的sn-p。

 $("#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

我认为您实际上需要在不需要时删除 disabled 属性。也许试试这个：

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