时间戳

首页 > 解决方案 > 如何验证只有一个 CheckBoxFor 等于组的“真”

javascript - 如何验证只有一个 CheckBoxFor 等于组的“真”

问题描述

如何强制选择复选框中的一个选项等于组的“真”？它可以与 jQuery 或数据注释一起使用...

因为目前您可以在所有为假的情况下提交，而我不想允许这样做，我希望其中只有一个必须并且必须为真，否则提交将无法正常工作。

<div class="row">
    @Html.LabelFor(model => model.Question1CB1, htmlAttributes: new { @class = "control-label col-sm-2" })
    <div class="col-sm-1">
        <div class="checkbox">
            @Html.CheckBoxFor(model => model.Question1CB1, new { @class = "Question1CBs" })
            @Html.ValidationMessageFor(model => model.Question1CB1, "", new { @class = "text-danger" })
        </div>
    </div>

    @Html.LabelFor(model => model.Question1CB2, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-sm-1">
        <div class="checkbox">
            @Html.CheckBoxFor(model => model.Question1CB2, new { @class = "Question1CBs" })
            @Html.ValidationMessageFor(model => model.Question1CB2, "", new { @class = "text-danger" })
        </div>
    </div>

    @Html.LabelFor(model => model.Question1CB3, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-sm-1">
        <div class="checkbox">
            @Html.CheckBoxFor(model => model.Question1CB3, new { @class = "Question1CBs" })
            @Html.ValidationMessageFor(model => model.Question1CB3, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

复选框已经起作用，只能选择其中之一。

<script>
    $(document).ready(function () {
        $('.Question1CBs').click(function () {
            $('.Question1CBs').not(this).prop('checked', false);
        });
    });
</script>

标签： javascriptc#jqueryasp.net-mvcbootstrap-4

解决方案

有几种方法可以解决您的问题。但不使用 javascript 的标准方法是使用单选按钮。但是您必须模拟您的需求以将正确的布尔类型设置为 true。所以像这样改变你的观点：

<div class="row">
@Html.LabelFor(model => model.Question1CB1, htmlAttributes: new { @class = "control-label col-sm-2" })
<div class="col-sm-1">
    <div class="checkbox">
        @Html.RadioButtonFor(model => model.SelectedQuestion , "CB1")
        @Html.ValidationMessageFor(model => model.Question1CB1, "", new { @class = "text-danger" })
    </div>
</div>

@Html.LabelFor(model => model.Question1CB2, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-sm-1">
    <div class="checkbox">
        @Html.RadioButtonFor(model => model.SelectedQuestion , "CB2")
        @Html.ValidationMessageFor(model => model.Question1CB2, "", new { @class = "text-danger" })
    </div>
</div>

@Html.LabelFor(model => model.Question1CB3, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-sm-1">
    <div class="checkbox">
        @Html.RadioButtonFor(model => model.SelectedQuestion, "CB3")
        @Html.ValidationMessageFor(model => model.Question1CB3, "", new { @class = "text-danger" })
    </div>
</div>

在您的操作中，您应该通过检查选定的属性来设置您的布尔属性：

[HttpPost]
    public JsonResult PostData(YourVMClass vm)
    {
        switch (vm.SelectedQuestion)
        {
            case "CB1":
                //Question1CB1 = true;
            case "CB2":
                //Question1CB2 = true;
            case "CB3":
                //Question1CB3 = true;
            default:
                break;
        }
    }

推荐阅读