twitter-bootstrap 引导开关返回“开/关”而不是“真/假”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33299849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap switches return "on/off" instead of "true/false"
提问by roryok
Bootstrap has massive usage, and lots of people much smarter than me have worked on it, so I'm sure the issue I'm about to point out is a total non issue and I'm just using it wrong, but....
Bootstrap 的使用非常广泛，很多比我聪明得多的人都在研究它，所以我确定我要指出的问题完全不是问题，我只是用错了，但是...... .
I have a form with a checkbox turned into a switch using bootstrapSwitch()
我有一个带有复选框的表单，它使用 bootstrapSwitch()
here's my html
这是我的 html
<div class="bootstrap-switch-square">
<input type="checkbox" data-toggle="switch" name="Resend" id="Resend" />
</div>
And js:
和js：
$("#Resend").bootstrapSwitch();
This produces a neat bootstrap toggle switch on my page. The page posts to an ASP.NET MVC4 controller method, which expects a boolean in the model.
这会在我的页面上生成一个整洁的引导程序切换开关。该页面发布到 ASP.NET MVC4 控制器方法，该方法需要模型中的布尔值。
public class MyModel
{
public bool Resend { get; set; }
}
When I post this form, my Resendboolean is always false. Why? Because bootstrap switch posts a value of onrather than true.
当我发布此表单时，我的Resend布尔值始终为 false。为什么？因为 bootstrap switch 发布一个值on而不是true。
I don't want to change my model from a boolean to a string, so I'm forced to intercept the post in jquery and change the value of my checkbox to trueif it's on. This seems backwards to me. Surely if bootstrapSwitch()is used on a checkbox it should produce true/falseinstead of on/off
我不想我的模型从一个布尔值更改为一个字符串，所以我不得不拦截jQuery的岗位，改变我的复选框的值true，如果它是on。这对我来说似乎是倒退。当然，如果bootstrapSwitch()在复选框上使用它应该产生true/false而不是on/off
Am I missing something?
我错过了什么吗？
回答by
From the HTML specifications, the default value for a checkbox is "on" because you have not included a valueattribute
根据HTML 规范，复选框的默认值为“on”，因为您尚未包含value属性
default/on
On getting, if the element has a value attribute, it must return that attribute's value; otherwise, it must return the string "on". On setting, it must set the element's value attribute to the new value.
默认/开启
在获取时，如果元素具有 value 属性，则必须返回该属性的值；否则，它必须返回字符串 "on"。在设置时，它必须将元素的 value 属性设置为新值。
Change you html to
将您的 html 更改为
<div class="bootstrap-switch-square">
<input type="checkbox" data-toggle="switch" name="Resend" id="Resend" value="true" />
</div>
so that if its checked, a value of truewill be sent in the form data and correctly bound to your booleanproperty (if unchecked, no value will be sent and the property will be its default (false) value
因此，如果选中，true则将在表单数据中发送一个值并正确绑定到您的boolean属性（如果未选中，则不会发送任何值并且该属性将是其默认值 ( false)
回答by MJK
I am just adding my findings to add more values in this question. I have the following code on a razor view
我只是添加我的发现以在这个问题中添加更多价值。我在剃刀视图上有以下代码
<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>
When the form is posted ModelState was in vaild on it show the following errors
当表单发布时 ModelState was in valid on 它显示以下错误
The value 'value' is not valid for Assigned.
值“值”对于已分配无效。
and when i moved the value attribute after the checked attribute it started working
当我在检查属性之后移动 value 属性时，它开始工作
<input type="checkbox" data-toggle="toggle" name="AssignedGroups[@index].Assigned"
@(isAssigned ? "checked" : "") value="@isAssigned" />
From this, I guess the order of the value attributeis also important. Please corrent me if i am worng.
由此，我猜value 属性的顺序也很重要。如果我穿了，请纠正我。
回答by jumps4fun
I needed an actual true or false to be sent, because a validation method wouldn't accept true or nothing. Here is what I did.
我需要发送一个实际的真或假，因为验证方法不接受真或不接受。这是我所做的。
<input type="hidden" name="myBoolean" value="0">
<input type="checkbox" name="myBoolean" value="1">
this above returns 0
以上返回0
if you check the checbox, and the DOM looks like this
如果您选中复选框，则 DOM 看起来像这样
<input type="hidden" name="myBoolean" value="0">
<input type="checkbox" name="myBoolean" value="1" checked>
Now the second named element with the same name overwrites the first, and it returns 1.
现在具有相同名称的第二个命名元素覆盖第一个，并返回 1。
litteral true/false would work as well
文字真/假也可以
