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

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!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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:
How do I make it possible to only check one of two checkboxes in ASP.NET MVC using models and controllers?


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x