MVC中有两个复选框，但每次只允许一个复选框

Two checkboxes in MVC, but only want to allow one at a time

本文关键字：复选框 许一个 两个 MVC      更新时间：2023-09-26

在我的模型中，我有两个bool属性，Approved和Rejected。我希望它们在MVC视图中作为单选按钮或复选框，但一次只希望选择一个。

目前我的观点如下：

<div class="form-group">
    @Html.LabelFor(model => model.Approved, htmlAttributes: new {@class = "control-label col-md-2"})
    <div class="col-md-2">
        <div class="checkbox">
            @Html.EditorFor(model => model.Approved, new { onclick="SingleCheckbox(this)" })
            @Html.ValidationMessageFor(model => model.Approved, "", new {@class = "text-danger"})
        </div>
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(model => model.Rejected, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-2">
        <div class="checkbox">
            @Html.EditorFor(model => model.Rejected, new { onclick="SingleCheckbox(this)" })
            @Html.ValidationMessageFor(model => model.Rejected, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

javascript看起来像这样：

SingleCheckbox = function(rb) {
    debugger;
    var id = rb.id, uncheck;
    if (id == 'Approved') {
        uncheck = document.getElementById('Rejected');
    } else {
        uncheck = document.getElementById('Approved');
    }
};

但是当我检查元素时，它甚至没有onclick事件。

我已经更新了我的代码以反映您的建议（见上文），但仍然存在相同的问题。问题是，当我检查元素时，复选框输入没有onclick事件。

这是呈现的HTML:

<div class="form-group">
    <label class="control-label col-md-2" for="Approved">Approved</label>
    <div class="col-md-2">
        <div class="checkbox">
            <input class="check-box" id="Approved" name="Approved" type="checkbox" value="true"><input name="Approved" type="hidden" value="false">
            <span class="field-validation-valid text-danger" data-valmsg-for="Approved" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-2" for="Rejected">Rejected</label>
    <div class="col-md-2">
        <div class="checkbox">
            <input class="check-box" id="Rejected" name="Rejected" type="checkbox" value="true"><input name="Rejected" type="hidden" value="false">
            <span class="field-validation-valid text-danger" data-valmsg-for="Rejected" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>

问题似乎与@Html.EditorFor助手有关。我更改了代码，现在它可以工作了。

<div class="form-group">
    @Html.LabelFor(model => model.Approved, htmlAttributes: new {@class = "control-label col-md-2"})
    <div class="col-md-2">
        @Html.CheckBoxFor(model => model.Approved, new { onclick = "SingleCheckbox(this)" })
        @Html.ValidationMessageFor(model => model.Approved, "", new {@class = "text-danger"})
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(model => model.Rejected, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-2">
        @Html.CheckBoxFor(model => model.Rejected, new { onclick = "SingleCheckbox(this)" })
        @Html.ValidationMessageFor(model => model.Rejected, "", new {@class = "text-danger"})
    </div>
</div>

我只需要更新javascript，使其更通用，我可能想在网站的其他领域使用它。

在chackbox的onclick中调用SingleCheckbox(this)而不是SingleCheckbox.call(this)，如下所示。

@Html.CheckBoxFor(model => model.Approved, new { onclick = "SingleCheckbox(this)" })
@Html.CheckBoxFor(model => model.Rejected, new { onclick = "SingleCheckbox(this)" })

SingleCheckbox应该如下。

var SingleCheckbox = function (rb) {
    var id = rb.id, uncheck;
    if (id == 'Approved') {
        uncheck = document.getElementById('Rejected');
    } else {
        uncheck = document.getElementById('Approved');
    }
    uncheck.checked = false;
}

更新：在asp.net mvc4及其早期版本中，@Html.EditorFor没有htmlAtrributes的参数。您可以使用@Html.CheckBoxFor。

希望这对你有帮助。

尝试一下，希望它能在中呈现出所需的带有onclick的标记

@Html.EditorFor(model => model.Approved, new { @onclick = '"SingleCheckbox.call(this)"' })
相关文章：