MVC中的两个复选框，但一次只允许一个复选框

在我的模型中，我有两个布尔属性，Approved和Rejected。我希望它们作为单选按钮或MVC视图上的复选框，但一次只想选择一个。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>

来源

2015-12-04 M Kenyon II

这是您的原始问题的附注，但我认为如果您使用单选按钮，则可以解决您的问题并获得更好的用户体验。复选框意味着允许多个选择（即它们通常包含诸如_“检查所有适用的”的短语_）。另一方面，单选按钮是专门为***一次且只能选择一个***选项而设计的...... – War10ck

您可以显示使用2个单独bool的单选按钮的示例吗？ –

如果这两个值是互斥的，那么你有设计问题。你应该拥有一个单独的属性（比如说）'状态'（'string'或'enum'）并使用单选按钮并避免不必要的脚本（并且需要在服务器上再次重复验证） –

呼叫SingleCheckbox(this)，而不是在chackbox的onclickSingleCheckbox.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。

希望这会帮助你。

来源

2015-12-04 18:03:47 Azim

它没有。我最初的问题仍然存在。当页面呈现时，它不包含onclick。我得到这个：'

' –

@Azim你不觉得它应该是这样的：new {@onclick ='“SingleCheckbox（this）”'} – Raider

试试这个希望这将使具有的onclick它

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

来源

2015-12-04 18:26:34 Raider

这个问题似乎是与@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是更通用的，我可能希望在网站的其他领域使用它。

来源

2015-12-04 18:29:00

MVC中的两个复选框，但一次只允许一个复选框

回答

相关问题