javascript 如何在点击另一个元素时取消选中模态弹出窗口中的复选框(由模型填充)？

0kjbasz6 于 2023-10-14 发布在 Java

关注(0)|答案(1)|浏览(92)

我正在使用.net MVC，并有一个模态弹出窗口，用于将数据输入到一个calllog（fullbackar.js）。填充下拉列表（用于可预订办公桌等）的模型还根据用户自动勾选某些复选框。如果使用了“预订对象”选项卡，我希望勾选框取消勾选。我已经尝试了所有我能想到的JavaScript和JQuery（attr，prop和瓦尔）。值/属性确实发生了变化，但复选框本身保持勾选。
模态的代码（有些可能会丢失，因为我已经删除了不相关的部分）：

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

Aid的值是从模型中设置的，是一个布尔值。

如果勾选了复选框（因此value为true），我希望当用户更改“Booked For”选项卡中的值时，不选中该复选框。
我已经运行了这个jQuery/JavaScript，我认为它应该改变值-它确实改变了属性的值，但复选框仍然选中。

$('#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);
    });