Question

Bootstrap有大量使用，很多人比我更聪明，所以我确定我要指出的问题是完全没有问题而且我只是错误地使用它，但是....

我有一个表格，其复选框已变为使用bootstrapSwitch()

的开关

这是我的HTML

<div class="bootstrap-switch-square">
   <input type="checkbox" data-toggle="switch" name="Resend" id="Resend" />
</div>

和js：

$("#Resend").bootstrapSwitch();

这会在我的页面上产生一个整洁的bootstrap切换开关。该页面发布到ASP.NET MVC4控制器方法，该方法需要模型中的布尔值。

public class MyModel
{
    public bool Resend { get; set; }
}

当我发布此表单时，我的Resend布尔值始终为false。为什么？因为bootstrap开关的值为on而不是true。

我不想将我的模型从布尔值更改为字符串，所以我不得不在jquery中截取帖子，如果是true，我会将复选框的值更改为on 。这似乎是我的倒退。当然，如果复选框上使用bootstrapSwitch()，则应生成true/false而不是on/off

我错过了什么吗？

Answer 1

从HTML specifications开始，复选框的默认值为＆＃34; on＆＃34;因为您没有包含value属性

默认/上

获取时，如果元素具有value属性，则必须返回该属性的值;否则，必须返回字符串＆＃34; on＆＃34; 。在设置时，必须将元素的value属性设置为新值。

将html更改为

<div class="bootstrap-switch-square">
  <input type="checkbox" data-toggle="switch" name="Resend" id="Resend" value="true" />
</div>

因此，如果选中它，则会在表单数据中发送true的值并正确绑定到您的boolean属性（如果未选中，则不会发送任何值，该属性将是其属性默认（false）值

Answer 2

我只想添加我的发现，在这个问题中添加更多值。我在剃刀视图上有以下代码

<label class="switch">
    @{ var isAssigned = Model?.Any(x => x.Id == group.Id) ?? false; }
    <input type="checkbox" data-toggle="toggle"
           name="AssignedGroups[@index].Assigned"  value="@isAssigned" 
           @(isAssigned ? "checked" : "") />
    <span class="slider"></span>
</label>

当表单发布时，ModelState在vaild上显示以下错误

值'value'对Assigned无效。

当我在checked属性之后移动value属性时，它开始工作

<input type="checkbox" data-toggle="toggle" name="AssignedGroups[@index].Assigned"  
@(isAssigned ? "checked" : "") value="@isAssigned" />

据此，我猜值属性的顺序 也很重要。如果我知道的话，请纠正我。

Answer 3

我需要发送真实的true或false，因为验证方法不会接受true或不接受任何东西。这是我所做的。

<input type="hidden" name="myBoolean" value="0">
<input type="checkbox" name="myBoolean" value="1">

以上返回0

如果选中复选框，则DOM如下所示

<input type="hidden" name="myBoolean" value="0">
<input type="checkbox" name="myBoolean" value="1" checked>

现在，第二个具有相同名称的命名元素将覆盖第一个，并返回1。

完全正确/错误也可以

Bootstrap开关返回“开/关”而不是“真/假”

3 个答案: