How to validate that only one CheckBoxFor equals to "true" of a group

Question

How can I enforce to select only one option of the checkboxes being equal to "true" of a group? It can be with jQuery or Data Annotations...

Because currently you can submit with all being false, and I don't want to allow that, I want that only one of them must and need to be true, otherwise the submit won't work.

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

The checkboxes already work that it can only be selected one of them.

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

please check the answer https://stackoverflow.com/a/2684453/6564107 — Vishal modi, Dec 09 '19 at 04:15
uhm with the jQuery code I put that part already works... I edited my question, what I need is to enforce that only one of them can be true — aesax, Dec 09 '19 at 04:24
so want something like `radiobutton`, using checkbox, right ? — Vishal modi, Dec 09 '19 at 04:28
I think aesax want to validate a diffrent matter @Vishalmodi — Ali Maleki, Dec 09 '19 at 04:44
does it need to be a radiobutton for such a validation? and currently i'm using CheckBoxFor because thats the way I made it work to save my data correctly to model while allowing only to select one of them — aesax, Dec 09 '19 at 04:46
yes, that is why radio button is there, and you want that only one can be true then why making things more complex. — Vishal modi, Dec 09 '19 at 05:26

score 0 · Answer 1 · answered Dec 09 '19 at 06:09

There are several ways to solve your problem. but the standard way without using javascript is to use radio buttons. But you have to simulate your demand to set the proper boolean type to true. So change your view like this :

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

And in your action you should set your boolean property with checking the selected one :

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

How to validate that only one CheckBoxFor equals to "true" of a group

1 Answers1