Question

是否可以使用由复选框和无线电组成的bootstrap 3样式的btn-groups来使用tabbing来获得焦点？当您使用鼠标点击它们时，这些工作正常，但如果有人通过一串输入进行选项卡，则完全忽略这些输入。

据我所知，隐藏的输入只有标签显示。

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

   <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

Bootstrap 3中忽略了Radio和Checkbox tabbing焦点

2 个答案: