How can I make a checkbox (populated by model) inside a modal popup untick on click of another element?

Question

I am using .net MVC and have a modal popup that is used for entering data into a callendar (fullcalendar.js). The model that populates the dropdowns (for bookable desks etc) also automatically ticks certain checkboxes based on the user. I want the tickboxes to untick if the 'Booked For' dropdown is used. I have tried all the Javascript and JQuery I can think of (attr, prop and val). The values/attributes do change, but the checkbox itself stays ticked.

The code for the modal (some of the might be missing as I've cut out the non relevant parts):

<div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Create Booking</h4>
            </div>
            <div class="modal-body">
                <p>Booking Details.</p>
                @using (Html.BeginForm("CreateEvent", "Calendar", FormMethod.Post, new { id = "Create" }))
                {
                    <div class="form-group">
                        @Html.LabelFor(model => model.BookedFor, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">

                            @Html.DropDownListFor(model => model.BookedFor, Model.BookedForList.Select(x => new SelectListItem { Text = x.FullName, Value = x.FullName }), new { @class = "form-control chosen-select", @id = "BookList" })
                            
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.FirstAider, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.FirstAider, new { @class = "form-control", @id = "Aid" })
                        </div>
                    </div>
                   
                            </div>
                        </div>
                        @Html.HiddenFor(c => c.ID)*@
                    @Html.TextBoxFor(model => model.ID, new { @class = "form-control", @style = "display: none;", @id = "CID", @readonly = "readonly" })
                    @Html.AntiForgeryToken()
                }
            </div>
            <br />
            <br />
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" id="CreateSubmit" class="btn btn-primary">Save</button>
            </div>

The value of #Aid is set from the model and is a boolean.

If the tickbox is checked (so value is true), I want it to be unchecked when the user changes the value in the 'Booked For' dropdown.

I've run this jQuery/JavaScript which I think should change the values - it does change the values of the attributes, but the checkbox remains ticked.

    $('#BookList').change(function () {
        var at = $("#Aid").attr("checked");
        var prop = $("#Aid").prop("checked");
        alert("attr: " + at + ", prop: " + prop);


        $("#Aid").prop("checked", false).change()
        $("#Aid").removeAttr("checked");
        
        var atb = $("#Aid").attr("checked");
        var propb = $("#Aid").prop("checked");
        alert("attr: " + atb + ", prop: " + propb);

    });

When the checkbox is ticked by the model, the first alert shows:

attr: checked, prop: true

and the second alert shows:

attr: undefined, prop: false

When the checkbox is not ticked by the model, both alerts show:

attr: undefined, prop: false

So the values are changing to match the unchecked box, but the box itself stays ticked. What command/attribute am I missing?

Answer 1

I've (sort of) solved it. It appears that the issue was that the jQuery didn't like talking to the checkbox that was created by Razor with the EditorFor - if I change it to CheckBoxFor, I can now update the checkbox!

The checkbox has become three times the size for some reason, but that's a separate issue.