0

Модель

public bool Delivery_type_one { get; set; }
public bool Delivery_type_two { get; set; }

Есть два чекбокса, как сделать чтобы нельзя было выбрать сразу два?

<div class="form-group">
        @Html.Label("del1", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.Delivery_type_one)
                @Html.ValidationMessageFor(model => model.Delivery_type_one, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-group">
        @Html.Label("del2", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.Delivery_type_two)
                @Html.ValidationMessageFor(model => model.Delivery_type_two, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
1
  • 3
    А почему не radiobutton?
    – Batanichek
    Commented 2 апр. 2017 в 19:15

2 ответа 2

2

$(".check-box").change(function() {
    $(".check-box").prop('checked', false);
    $(this).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/MvcPageAction/42204204-b245-430c-a253-f0e7bde41240//Home/Index" method="post" novalidate="novalidate">				<div class="form-group">
        <label class="control-label col-md-2" for="del1">Delivery_type_one</label>
        <div class="col-md-10">
            <div class="checkbox">
                <input class="check-box" data-val="true" data-val-required="The Delivery_type_one field is required." id="Delivery_type_one" name="Delivery_type_one" type="checkbox" value="true"><input name="Delivery_type_one" type="hidden" value="false">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2" for="del2">Delivery_type_two</label>
        <div class="col-md-10">
            <div class="checkbox">
                <input class="check-box" data-val="true" data-val-required="The Delivery_type_two field is required." id="Delivery_type_two" name="Delivery_type_two" type="checkbox" value="true"><input name="Delivery_type_two" type="hidden" value="false">
            </div>
        </div>
    </div>
</form>

1

Вариант с radio button:

css взял тут

input[type="radio"] {
    -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
    -moz-appearance: checkbox;    /* Firefox */
    -ms-appearance: checkbox;     /* not currently supported */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/MvcPageAction/42204204-b245-430c-a253-f0e7bde41240//Home/Index" method="post" novalidate="novalidate">				<div class="form-group">
        <label class="control-label col-md-2" for="del1">Delivery_type_one</label>
        <div class="col-md-10">
            <div class="checkbox">
                <input class="check-box" data-val="true" data-val-required="The Delivery_type_one field is required." id="Delivery_type_one" name="Delivery_type" type="radio" value="true"><input name="Delivery_type_one" type="hidden" value="false">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2" for="del2">Delivery_type_two</label>
        <div class="col-md-10">
            <div class="checkbox">
                <input class="check-box" data-val="true" data-val-required="The Delivery_type_two field is required." id="Delivery_type_two" name="Delivery_type" type="radio" value="true"><input name="Delivery_type_two" type="hidden" value="false">
            </div>
        </div>
    </div>
</form>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.