Twitter bootstrap 在引导3中忽略收音机和复选框选项卡焦点

是否可以使用由复选框和收音机组成的bootstrap 3样式的btn组来使用选项卡来获得焦点？当您使用鼠标单击这些输入时，它们工作得很好，但是如果有人在输入字符串中进行切换，则完全忽略这些输入

我知道这取决于隐藏的输入和显示的标签

是否有任何已知的变通方法来获得所需的行为

选择一个单选选项：
对
大概
不

这里有一个解决方法：

• 添加

  输入：隐藏

• 使用

  按钮

  而不是

  输入

  来保持选项卡焦点
• 捕捉您的

  按钮

  单击事件以更改

  输入：隐藏

  值

复选框示例

<input name="checkbox1" type="hidden" value="0"/>
<input name="checkbox2" type="hidden" value="0"/>
<input name="checkbox3" type="hidden" value="0"/>
<div class="btn-group-vertical" data-toggle="buttons">
    <button type="button" class="btn btn-default" 
        data-checkbox-name="checkbox1">Yes</button>
    <button type="button" class="btn btn-default" 
        data-checkbox-name="checkbox2">Maybe</button>
    <button type="button" class="btn btn-default" 
        data-checkbox-name="checkbox3">No</button>
</div>

<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group" data-toggle="buttons">
    <button type="button" class="btn btn-default active" 
        data-radio-name="radio">Yes</button>
    <button type="button" class="btn btn-default" 
        data-radio-name="radio">Maybe</button>
    <button type="button" class="btn btn-default" 
        data-radio-name="radio">No</button>
</div>

收音机示例

<input name="checkbox1" type="hidden" value="0"/>
<input name="checkbox2" type="hidden" value="0"/>
<input name="checkbox3" type="hidden" value="0"/>
<div class="btn-group-vertical" data-toggle="buttons">
    <button type="button" class="btn btn-default" 
        data-checkbox-name="checkbox1">Yes</button>
    <button type="button" class="btn btn-default" 
        data-checkbox-name="checkbox2">Maybe</button>
    <button type="button" class="btn btn-default" 
        data-checkbox-name="checkbox3">No</button>
</div>

<input name="radio" type='hidden' value="Yes"/>
<div class="btn-group" data-toggle="buttons">
    <button type="button" class="btn btn-default active" 
        data-radio-name="radio">Yes</button>
    <button type="button" class="btn btn-default" 
        data-radio-name="radio">Maybe</button>
    <button type="button" class="btn btn-default" 
        data-radio-name="radio">No</button>
</div>

---

我认为这是Bootstrap（）中的一个错误，但在3.2.1版中得到了解决。回答很好，我确实研究了使用按钮，但我找不到这么简单的方法来设置输入的状态。你的解决方案就是一张票！

$('.btn[data-radio-name]').click(function() {
    $('.btn[data-radio-name="'+$(this).data('radioName')+'"]').removeClass('active');
    $('input[name="'+$(this).data('radioName')+'"]').val(
        $(this).text()
    );
});