MVC中有兩個復選框，但一次只允許允許一個

Question

在我的模型中，我有兩個布爾屬性，批准和拒絕。 我希望將它們作為單選按鈕或MVC視圖上的復選框，但只希望一次選擇一個。

目前，我的視圖如下所示：

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

和JavaScript看起來像這樣：

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

但是當我檢查元素時，它甚至沒有onclick事件。

我已經更新了代碼以反映您的建議（請參見上文），但仍然存在相同的問題。 問題是，當我檢查元素時，復選框輸入中沒有onclick事件。

這是呈現的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

如下所示在chackbox的onclick中調用SingleCheckbox(this)而不是SingleCheckbox.call(this) 。

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

和SingleCheckbox應該如下所示。

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

    uncheck.checked = false;
}

更新：在asp.net mvc4及其早期版本中， @Html.EditorFor沒有htmlAtrributes參數。 您可以改用@Html.CheckBoxFor 。

希望這會幫助你。

Answer 2

問題似乎與@Html.EditorFor幫助程序有關。 我更改了代碼，現在可以正常工作了。

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

我只需要更新JavaScript使其更通用，我可能想在網站的其他區域中使用它。

Answer 3

希望嘗試此操作，它將在其中具有onclick的情況下呈現所需的標記

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