Bootstrap 单选按钮组在输入键盘后显示错误值 Select

Question

我有这个 bootstrap 带单选按钮的按钮组：

<div id="MyField" data-toggle="buttons" class="btn-group">
    <label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val1" autocomplete="off">First</label>
    <label class="btn btn-primary btn-sm active"><input type="radio" name="MyField" value="Val2" autocomplete="off" checked="">Second</label>
    <label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val3" autocomplete="off">Third</label>
    <label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val4" autocomplete="off">Fourth</label>
</div>

如果我 select 使用鼠标的值，一切正常。但是，如果我使用 tab 键移动到组并使用键盘箭头键 select 另一个选项，则会发生以下情况：

活动按钮按预期在视觉上发生变化
更改 javascript 事件（使用 jQuery $('#MyField').change(...) 处理）按预期触发
提交表单时，默认selected单选按钮的原始值被发送到后端。

关于为什么会这样以及如何解决它有什么想法吗？

Answer 1

原来这是 bootstrap 3.3.4 中的错误，已在 3.3.7 中修复。更新后一切正常

Answer 2

我的解决方法是只在输入中包含一个 onfocus 属性。

<label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val1" autocomplete="off" onfocus="$(this).click();">First</label>

Bootstrap 单选按钮组在输入键盘后显示错误值 Select

Bootstrap Radio Button Group Posts Wrong Value after Keyboard Select

radio-group

radio-button

buttongroup

twitter-bootstrap-3