This is a sample of the code I'm working with:
<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>
Despite trying multiple different solutions, clicking on the checkbox does not trigger any desired action. Even resorting to a simpler solution like the following did not yield results:
document.getElementById('Attendance').onchange = function () {
document.getElementById('Grade').disabled = this.checked;
};
I have exhausted various resources and tried different scripts, but none seem to work. I must be overlooking something obvious, but even after spending considerable time, I am unable to identify the issue.
My apologies if this question seems trivial or novice-like. I am hoping for some guidance in resolving this issue.
UPDATE: To provide additional context, the form successfully saves data to the database upon submission. The only area where it falls short is in disabling the ability to edit the "Grade" field when the student has not attended.
The primary goal remains to disable the input field when the "attendance" checkbox is checked.