Question

我有这个带有单选按钮的引导程序按钮组：

<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>

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

活动按钮按预期在视觉上发生变化
change javascript事件（使用jQuery $（'＃MyField'）。change（...）处理）已按预期触发
提交表单后，默认选中的单选按钮的原始值将发送到后端。

关于这是为什么以及如何解决的任何想法？

Answer 1

结果证明这是引导程序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单选按钮组在选择键盘后发布了错误的值

2 个答案: