Почему мой флажок на изменения не работает (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");
        }
    });
});