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() vs .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");
        }
    });
});

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

2 个答案: