Radio and Checkbox tabbing focus ignored in Bootstrap 3

Question

Is it possible using bootstrap 3 styled btn-groups made up of checkboxes and radios to use tabbing to gain focus? These work fine when you use a mouse to click on them but in the case of someone tabbing through a string of inputs, these are completely ignored.

I understand that it is down to the inputs being hidden and only the labels showing.

Are there any known workarounds to get the desired behaviour?

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

Here is a workaround :

• add an input:hidden
• use button instead of input to maintain tabbing focus
• catch your button click events to change input:hidden value.

Checkbox example

<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
    );
});

Radio example

<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

Answer 2

I think it was a bug in Bootstrap (https://github.com/twbs/bootstrap/issues/12145) but it was solved in version 3.2.1