Bootstrap 3中忽略了单选和复选框选项卡焦点

Question

是否可以使用由复选框和收音机组成的引导 3 样式的 btn 组来使用制表符来获得焦点？当您使用鼠标单击它们时，它们可以正常工作，但如果有人在输入字符串中切换，这些将被完全忽略。

我知道这是因为隐藏了输入而只显示了标签。

是否有任何已知的解决方法来获得所需的行为？

full example in this jsfiddle

   <div class="row" id="radios">
      <div class="col-xs-12">
         <div class="form-group">
            <label for="" class="col-md-6 control-label">Choose one radio option:</label>
            <div class="col-md-6">
               <div class="btn-group" data-toggle="buttons">
                  <label for="yes" class="btn btn-default">
                  <input type="radio" name="radio_options" id="yes"/> Yes
                  </label>
                  <label for="maybe" class="btn btn-default">
                  <input type="radio" name="radio_options" id="maybe"/> Maybe
                  </label>
                  <label for="no" class="btn btn-default">
                  <input type="radio" name="radio_options" id="no"/> No
                  </label>
               </div>
            </div>
         </div>
      </div>
   </div>    

Answer 1

我认为这是 Bootstrap (https://github.com/twbs/bootstrap/issues/12145) 中的一个错误，但在 3.2.1 版本中已解决

Answer 2

这是一个解决方法：

• 添加input:hidden
• 使用button 而不是input 来保持标签焦点
• 捕捉您的button 点击事件以更改input:hidden 值。

复选框示例

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

$('.btn[data-checkbox-name]').click(function() {
    $('input[name="'+$(this).data('checkboxName')+'"]').val(
        $(this).hasClass('active') ? 0 : 1
    );
});

广播示例

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

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

Updated Fiddle