Why is my checkbox on change not working (AJAX)

Question

This is how my razor code looks like

<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>

Yet for some reason, clicking on the checkbox does nothing at all. I have tried this with simple script as well, and that didn't work either.

    document.getElementById('Attendance').onchange = function () {
    document.getElementById('Grade').disabled = this.checked;
};

Neither of these worked.

I have even copied some solutions from here (one of them is that last simple scrip with document.getElementbyId, and none of it worked. I have to be missing something simple, but I've been looking at this for the past hour and I still can't figure it out.

I apologize if the question is stupid or noob-level. But I am getting desperate.

EDIT: Simply to add more information, this form works perfectly fine when submitting data, controller saves the stuff to the database... Everything works fine, just not the part where it disables the ability to edit the Grade if the student has not attended.

So the objective, is to disable the input field when the checkbox for "attendance" is checked

score 3 · Answer 1 · answered Mar 19 '19 at 15:56

3

The .attr() method only manage string; So if you want to change an attribut like disabled or even checked with a boolean or something else, you have to use the prop method.

For more information check this post : .prop() vs .attr()

You can execute the snippet below.

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

answered Mar 19 '19 at 15:56

Nico

518
2
11

Do the snippet work ? When you click on the Run Code Snippet, For me it works. Do you have some log on your console ? Check this before going further : 1. the jquery libraries script is loaded before your main. script 2. In your main script do $(document).ready(function () { ## your custom functions ##}). It will ensure that the dom is loaded. – Nico Mar 19 '19 at 16:13
Your code snippet works fine. It's something on my side, it just doesn't want to work. I have tried adding console.log and again... Nothing... https://pastebin.com/DXZjrdMX Here is how my current code looks like – Chessbrain Mar 19 '19 at 16:18
Not cool, i just copy paste your code it works fine on my side. Have you try to change your browser ? (works on Edge, FF, Chrome). Are you sure your scipt is loaded (type console.log("test") on your ready function. Sometimes some browser keep in cache the js so you have to do a force reload on the page to track the changement of js.( CTRL + F5 on ff and chrome) if you use safari on ios you have to kill the tab and reopen it. – Nico Mar 19 '19 at 16:52
After working on it for a long time... For some reason changing the IDs to anything BUT those mentioned made it work. There are no duplicates obviously, so I don't know why this is happening. – Chessbrain Mar 22 '19 at 14:20
1

It's good that you've managed to solve your problem, browsers can be a little capricious sometimes, if you're sure there's no ID that's duplicated, I don't see many leads regarding your problem. For information when IDSs are duplicated, JS will retrieve the first one and apply the events to it. I've already had a problem with ad blockers, if the ID looks like a potential ad, the ad blocker can prevent any script associated with this item. – Nico Mar 22 '19 at 14:31

bgraham · Answer 2 · 2019-03-19T16:03:43.913

1

I think you actually need to remove the disabled attribute when you don't want it. Maybe try this:

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

edited Mar 19 '19 at 16:03

answered Mar 19 '19 at 15:53

bgraham

1,939
1
10
17

1

can you add a console.log('test') right before the if (this.checked), maybe the event isn't getting hooked up – bgraham Mar 19 '19 at 15:58
You're correct, I just did that and it did nothing. But why isn't it getting called? – Chessbrain Mar 19 '19 at 16:00
I dont think this is the problem, because the javascript is after the dom, but maybe thats just in your example. Try wrapping this code with the jquery ready function. Ill update my answer – bgraham Mar 19 '19 at 16:03
Another thing to look for, are there any errors in the console? F12. If there's a syntax error, the javascript just gives up :) – bgraham Mar 19 '19 at 16:04
No errors, and even with the small change in code, nothing works. – Chessbrain Mar 19 '19 at 16:06
similar suggestion to the other answer thread. Try just putting a console.log('test') directly into the script tag. If even thats not firing, your browser is preventing JavaScript from running. Try a different browser – bgraham Mar 19 '19 at 17:03
After working on it for a long time... For some reason changing the IDs to anything BUT those mentioned made it work. There are no duplicates obviously, so I don't know why this is happening. – Chessbrain Mar 22 '19 at 14:20

Why is my checkbox on change not working (AJAX)

2 Answers2