How do I make it possible to only check one of two checkboxes in ASP.NET MVC using models and controllers?

Question

I have an online form which the applicants need to fill in. Some of the options is to check whether they are applying as multilateral or bilateral, and I am not sure how to make this happen in ASP.NET MVC?

I know I have to code it in a manner so that when one of them is checked, the other will be unchecked (i.e. setting the other to false when one is checked)

I tried doing so by using an id in the create.cshtml file and then included some code in the controller but did not work, because I am not sure how to include the attributes(?).

Could you please help me? I am sure it is just me being a newbie and not really that difficult.

below is from the razor pages

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

below is from the 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;
}

I also found some code online which suggested writing it in javascript and using jQuery, but I do not know how to implement it still. Below is the code

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

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

really appreciate any and all help!

Answer 1

Here is a working demo with jquery:

View:

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

result: