Two checkboxes in MVC, but only want to allow one at a time

Question

In my model I have two bool properties, Approved and Rejected. I would like them either as radio buttons or check boxes on the MVC view, but only want one to be selected at a time.

Currently my view looks like this:

<div class="form-group">
    @Html.LabelFor(model => model.Approved, htmlAttributes: new {@class = "control-label col-md-2"})
    <div class="col-md-2">
        <div class="checkbox">
            @Html.EditorFor(model => model.Approved, new { onclick="SingleCheckbox(this)" })
            @Html.ValidationMessageFor(model => model.Approved, "", new {@class = "text-danger"})
        </div>
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Rejected, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-2">
        <div class="checkbox">
            @Html.EditorFor(model => model.Rejected, new { onclick="SingleCheckbox(this)" })
            @Html.ValidationMessageFor(model => model.Rejected, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

And the javascript looks like this:

SingleCheckbox = function(rb) {
    debugger;
    var id = rb.id, uncheck;
    if (id == 'Approved') {
        uncheck = document.getElementById('Rejected');
    } else {
        uncheck = document.getElementById('Approved');
    }
};

But when I inspect the element, it doesn't even have the onclick event.

I've updated my code to reflect your recommendations (see above) and still have the same issue. The issue is that when I inspect the element the check box inputs DO NOT have an onclick event.

Here is the rendered HTML:

<div class="form-group">
    <label class="control-label col-md-2" for="Approved">Approved</label>
    <div class="col-md-2">
        <div class="checkbox">
            <input class="check-box" id="Approved" name="Approved" type="checkbox" value="true"><input name="Approved" type="hidden" value="false">
            <span class="field-validation-valid text-danger" data-valmsg-for="Approved" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-2" for="Rejected">Rejected</label>
    <div class="col-md-2">
        <div class="checkbox">
            <input class="check-box" id="Rejected" name="Rejected" type="checkbox" value="true"><input name="Rejected" type="hidden" value="false">
            <span class="field-validation-valid text-danger" data-valmsg-for="Rejected" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>

Answer 1

Call SingleCheckbox(this) instead of SingleCheckbox.call(this) in onclick of chackbox like following.

@Html.CheckBoxFor(model => model.Approved, new { onclick = "SingleCheckbox(this)" })
@Html.CheckBoxFor(model => model.Rejected, new { onclick = "SingleCheckbox(this)" })

And SingleCheckbox should be like following.

var SingleCheckbox = function (rb) {
    var id = rb.id, uncheck;
    if (id == 'Approved') {
        uncheck = document.getElementById('Rejected');
    } else {
        uncheck = document.getElementById('Approved');
    }

    uncheck.checked = false;
}

Update: In asp.net mvc4 and it's earlier version @Html.EditorFor has no parameter for htmlAtrributes . You can use @Html.CheckBoxFor instead.

Hope this will help you.

Answer 2

The issue seemed to be with the @Html.EditorFor helper. I changed my code and now it's working.

<div class="form-group">
    @Html.LabelFor(model => model.Approved, htmlAttributes: new {@class = "control-label col-md-2"})
    <div class="col-md-2">
        @Html.CheckBoxFor(model => model.Approved, new { onclick = "SingleCheckbox(this)" })
        @Html.ValidationMessageFor(model => model.Approved, "", new {@class = "text-danger"})
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Rejected, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-2">
        @Html.CheckBoxFor(model => model.Rejected, new { onclick = "SingleCheckbox(this)" })
        @Html.ValidationMessageFor(model => model.Rejected, "", new {@class = "text-danger"})
    </div>
</div>

I just have to update the javascript to be more generic, I may want to use this in other areas of the site.

Answer 3

希望尝试此操作，它将在其中具有onclick的情况下呈现所需的标记

@Html.EditorFor(model => model.Approved, new { @onclick = '"SingleCheckbox.call(this)"' })