提交按钮在引导 btn-group 类中不起作用答案

【问题标题】：Submit button doesn't work in bootstrap btn-group class提交按钮在引导 btn-group 类中不起作用
【发布时间】：2017-10-17 23:27:51
【问题描述】：

您能否建议如何实现引导 btn-group 元素，该元素由一个提交按钮组成，其余按钮用作复选框。实际上我已经创建了提到的但我的提交按钮不起作用，当它被按下时，什么也没有发生。这是我现在拥有的：

<form class="form-group" action ="" method = "get" novalidate>
<div class="btn-group-vertical" data-toggle="buttons">
    <button type="submit" class="btn btn-success">Search</button>
    <label class="btn btn-primary">
        <input type="checkbox" name="select_tag" value="2" id="id_select_tag_0" /> Mysql
    </label >
    <label class="btn btn-primary">
        <input type="checkbox" name="select_tag" value="3" id="id_select_tag_1" /> Disk health
    </label2>       
</div>
</form>

And the block looks like this

如果我将提交按钮放在 btn-group 块之外它可以工作：

<form class="form-group" action ="" method = "get" novalidate>
<button type="submit" class="btn btn-success">Search</button>
...

However, it looks ugly

那么是否有可能在一个引导按钮组中将许多按钮用作复选框，而将一个用作提交按钮？

【问题讨论】：

标签： html forms twitter-bootstrap button

【解决方案1】：

只需删除data-toggle="buttons"

【讨论】：

【解决方案2】：

您的表单元素中似乎有一些奇怪的空格并且没有设置操作。

尝试替换：

<form class="form-group" action ="" method = "get" novalidate>

有

<form class="form-group" action="#" method="get" novalidate>

【讨论】：

谢谢，但没有帮助。我发现问题是由 data-toggle="buttons" 参数引起的。如果我将其删除，则提交按钮可以工作，但这会将其他按钮变成我不想要的复选框+按钮。

【解决方案3】：

你可以用 javascript 做到这一点：

<form class="form-group" action ="" method = "get" novalidate>
<div class="btn-group-vertical" data-toggle="buttons">
    <button type="button" onClick="javascript:document.forms[0].submit();" class="btn btn-success">Search</button>
    <label class="btn btn-primary">
        <input type="checkbox" name="select_tag" value="2" id="id_select_tag_0" /> Mysql
    </label >
    <label class="btn btn-primary">
        <input type="checkbox" name="select_tag" value="3" id="id_select_tag_1" /> Disk health
    </label2>       
</div>
</form>

【讨论】：

谢谢！但是有没有没有js的默认解决方案？我认为这是非常微不足道的任务