twitter-bootstrap 使用引导程序将单选按钮作为必填字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21881658/
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
Making radio button as a required field using bootstrap
提问by Ajinkya
I am creating login page using bootstrap, here is my code
我正在使用引导程序创建登录页面，这是我的代码
<form class="form-signin" action="firstLogin.action" method="post">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="form-control" name="username" placeholder="User Name"
required="required" autofocus>
<br>
<input type="password" class="form-control" name="password" required="required"
placeholder="Password">
<br>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary" style="width: 150px">Admin</button>
<button type="button" class="btn btn-primary" style="width: 150px">User</button>
</div>
<div><br></div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
I want to make radio button field as required field . any idea how to do it.?
我想将单选按钮字段设为必填字段。知道怎么做吗？
回答by ringstaff
In order to make input required, the element must be an input element. Change your buttons to inputs, give them a name, add required, and change the type to 'radio', and required should work (see this fiddle):
为了使输入成为必需，元素必须是输入元素。将您的按钮更改为输入，给它们命名，添加必需的，并将类型更改为“收音机”，并且必需的应该可以工作（请参阅此小提琴）：
<div>
<input type="radio" name="radio-choice" required>Admin</input>
<input type="radio" name="radio-choice" required>User</input>
</div>
Unfortunately this means they don't look like cool buttons anymore. You can style radio buttons to look like what you want, and required will still stop the form from submitting, but you won't see the popup warning to select an option (see this fiddle).
不幸的是，这意味着它们不再像很酷的按钮了。您可以将单选按钮设置为您想要的样式，并且 required 仍会阻止表单提交，但您不会看到选择选项的弹出警告（请参阅此小提琴）。
So, for what you want, it looks like you'll have to do some basic programming. Here's a fiddlewith a basic check in place using your original buttons.
回答by ringstaff
I got it!
我知道了！
All you need to do is
你需要做的就是
-create two divs, one for data-toggle and child her with btn-group
- 创建两个 div，一个用于数据切换，并使用 btn-group 为她设置子级
Therefore, you get a group of buttons with a radio inside. set those radio btns to
因此，您会得到一组带有收音机的按钮。将这些无线电 btns 设置为
class="sr-only"
类=“sr-only”
<form class="form-signin" action="firstLogin.action" method="post">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="form-control" name="username" placeholder="User Name" required autofocus>
<br>
<input type="password" class="form-control" name="password" required placeholder="Password">
<br>
<div data-toggle="buttons">
<div class="btn-group">
<label class="btn btn-primary">
<input type="radio" name="type" id="type" value="admin" class="sr-only" required>Admin
</label>
<label class="btn btn-primary">
<input type="radio" name="type" id="type" value="user" class="sr-only" required>User
</label>
</div>
</div>
</div>
<br>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
It's working on bootstrap3
它在 bootstrap3 上工作
