Bootstrap开关返回“on/off”而不是“true/false”

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中拦截提交，并在复选框的值为“on”时将其更改为“true”。这对我来说似乎是相反的。如果在复选框上使用bootstrapSwitch()，它应该生成true/false而不是on/off。我有什么遗漏吗？

- roryok

---

有趣的是，bootstrapSwitch 应该返回一个布尔值，而不是 on 或 off。http://www.bootstrap-switch.org/options.html 至少是这样说的。 - Chris

你正在创建一个没有value属性的手动文本框，因此它会提交默认值on。要么使用@Html.CheckboxFor()，要么在你的HTML中手动添加value="true"。 - user3559349

在复选框中，所发送的是值。只有当复选框被选中时才会发出此值。否则，在这种情况下，您的模型属性“Resend”将采用其类型的默认值，对于布尔值而言，默认值为false。如果您查看网页源代码，它使用的复选框没有一个值。因此，我认为他们已经在代码中重写了val方法以返回“on”。 - Amila

@Chris，bootstrapSwitch并不会“返回”任何内容。它发送到服务器的是复选框的值，默认情况下为on，如果已选中（除非提供了value属性）。 - user3559349

@roryok请看一下我创建的这个示例。您可以在代码中设置值，该值将被发布，而不是“on”。http://plnkr.co/edit/0lLclfecpgOwB2sNSLPJ?p=preview - Amila

Answer 1

根据HTML规范，如果您没有包含value属性，则复选框的默认值为“on”

默认值/开启

获取时，如果元素具有value属性，则必须返回该属性的值；否则，必须返回字符串“on”。设置时，它必须将元素的value属性设置为新值。

请更改您的HTML为

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

这样，如果被选中，true 的值将会被发送到表单数据并正确绑定到您的 boolean 属性（如果未被选中，则不会发送任何值，属性将保持其默认值 (false)）。

- user3559349

Answer 2

我只是在这个问题中添加我的发现，以增加更多的价值。我在Razor视图上有以下代码：

<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无效，显示以下错误：

“value”对于“Assigned”无效。

当我将value属性移动到checked属性之后，它开始工作。

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

从这个角度来看，我猜测value属性的顺序也很重要。如果我错了，请纠正我。

- MJK

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。

文字上的true/false也可以起作用。

- jumps4fun