如何使用模型和控制器仅检查 ASP.NET MVC 中的两个复选框之一？

Question

我有一个申请人需要填写的在线表格。一些选项是检查他们是申请多边还是双边，我不知道如何在 ASP.NET MVC 中实现这一点？

我知道我必须以某种方式对其进行编码，以便当其中一个被选中时，另一个将被取消选中（即，在选中一个时将另一个设置为 false）

我尝试通过在 create.cshtml 文件中使用 id 来执行此操作，然后在 controller 中包含一些代码，但没有奏效，因为我不确定如何包含属性（？）。

请你帮助我好吗？ 我相信这只是我是一个新手，并不是那么困难。

以下来自 razor 页面

 <div class="form-group">
            @Html.LabelFor(model => model.Multilateral, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div ID="chkMu" oncecheckedchanged="chkMu_CheckedChanged" class="checkbox">
                    @Html.EditorFor(model => model.Multilateral)
                    @Html.ValidationMessageFor(model => model.Multilateral, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Bilateral, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div ID="chkBi" oncecheckedchanged="chkBi_CheckedChanged" class="checkbox">
                    @Html.EditorFor(model => model.Bilateral)
                    @Html.ValidationMessageFor(model => model.Bilateral, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

以下来自 controller

protected void chkBi_CheckedChanged(object sender, EventArgs e, object chkMu)
{
    chkMu.Checked = false;
}

protected void chkMu_CheckedChanged(object sender, EventArgs e, object ckhBi)
{
    chkBi.Checked = false;
}

我还在网上找到了一些代码，建议用 javascript 编写它并使用 jQuery，但我仍然不知道如何实现它。 下面是代码

$('div .checkbox').click(function () {
    var checkedState = $(this).prop("checked")
    $(this)
        .parent('div')
        .children('.checkbox:checked')
        .prop("checked", false);

    $(this).prop("checked", checkedState);
});

非常感谢任何和所有的帮助！

Answer 1

这是 jquery 的工作演示：

看法：

<form asp-action="Create" asp-controller="Lead">
    <div class="form-group">
        @Html.LabelFor(model => model.Multilateral, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div oncecheckedchanged="chkMu_CheckedChanged" >
                <input type="checkbox" id="chkMu" name="chkMu"/>
                @Html.EditorFor(model => model.Multilateral)
                @Html.ValidationMessageFor(model => model.Multilateral, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Bilateral, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div oncecheckedchanged="chkBi_CheckedChanged">
                <input type="checkbox" id="chkBi" name="chkBi"/>
                @Html.EditorFor(model => model.Bilateral)
                @Html.ValidationMessageFor(model => model.Bilateral, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
    <input type="submit" />
</form>

jquery：

@section scripts{

    <script>
        $("input[type='checkbox']").click(function () {
            if (this.checked&&this.id == "chkMu")
            {
                $('#chkBi').prop('checked', false);
            } else if (this.checked && this.id == "chkBi")
            {
                $('#chkMu').prop('checked', false);
            }
        })
    </script>
}

结果：