Let’s break down why your checkbox’s change event isn’t firing and fix it step by step – I’ve dealt with similar Razor + JS event issues before, so let’s start with the most common culprits:

1. First, Check the Basics #

• Inspect your browser’s console: Open DevTools (F12) and look for errors like "jQuery is not defined" or "Cannot set property 'onchange' of null". If jQuery isn’t loaded, your first script won’t work; if elements can’t be found, that’s a clear red flag.
• Verify rendered HTML IDs: Razor sometimes auto-generates IDs with prefixes (e.g., if your model is nested, it might render ClassHeld_Attendance instead of just Attendance). Right-click the checkbox and select "Inspect" to confirm its actual ID matches what you’re targeting in JS. Even though you added id="Attendance", double-check that Razor didn’t override it.

2. Fix DOM Loading Timing #

If your script runs before the DOM is fully loaded, it can’t find the #Attendance element to bind the event. Here’s how to fix that:

jQuery Solution #

Wrap your code in $(document).ready() to ensure it runs after the DOM is ready:

$(document).ready(function() {
    $("#Attendance").on("change", function () {
        // Use prop() instead of attr() for boolean properties like disabled
        $("#Grade").prop("disabled", this.checked);
    });
});

Vanilla JS Solution #

Use the DOMContentLoaded event to wait for the DOM to finish rendering:

document.addEventListener('DOMContentLoaded', function() {
    const attendanceCheckbox = document.getElementById('Attendance');
    const gradeInput = document.getElementById('Grade');
    
    if (attendanceCheckbox && gradeInput) {
        attendanceCheckbox.onchange = function () {
            gradeInput.disabled = this.checked;
        };
    }
});

3. Handle Dynamically Loaded Content (AJAX Scenario) #

If this form is loaded via AJAX (e.g., a partial view inserted after the initial page load), direct event binding won’t work because the checkbox didn’t exist when the script ran. Use event delegation instead:

jQuery Delegation #

// Bind to a parent element that exists on page load (document works as a fallback)
$(document).on("change", "#Attendance", function () {
    $("#Grade").prop("disabled", this.checked);
});

Vanilla JS Delegation #

document.addEventListener('change', function(e) {
    if (e.target.id === 'Attendance') {
        const gradeInput = document.getElementById('Grade');
        if (gradeInput) {
            gradeInput.disabled = e.target.checked;
        }
    }
});

4. Add Initial State (Optional but Recommended) #

Make sure the grade input reflects the initial state of the checkbox (e.g., if Model.Attendance is true, the input should start disabled):

<input id="Grade" asp-for="Grade" type="number" value="@Model.Grade" class="form-control" min="0" max="5" @(Model.Attendance ? "disabled" : "") />

One last tip: Replace attr("disabled") with prop("disabled") in your jQuery code – jQuery handles boolean DOM properties better with prop than attr, which might be part of the issue.

内容的提问来源于stack exchange，提问作者Chessbrain