Question

我试图测试Bootstrap切换按钮的实现，而他们的js中的某些内容并不允许我选择＆＃39; tab＆＃39;用键盘给他们。当我删除js时，我可以选择＆＃39; tab到复选框就好了。任何人都可以帮助我扩展这个，以便我可以＆＃39; tab＆＃39;每个切换按钮？

HTML

<div class="checkbox">
  <label>
    <input type="checkbox" data-toggle="toggle">
    Option one is enabled
  </label>
</div>

JS https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js

的jsfiddle https://jsfiddle.net/galnova/s2x57t2u/

Answer 1

实际的input复选框隐藏在display: none后面（div.toggle-group）。这个div只是看起来像一个使用CSS＆amp;的复选框。使用JavaScript切换。

事实上，复选框实际上是在场景后面聚焦/标签，你只是无法直观地看到它，因为它是隐藏的。

如果您不需要，可以编写显式JQuery，以便在隐藏复选框聚焦时聚焦外部元素。

以下是您需要包含的JQuery代码：

$( "input:checkbox" ).focus(function() {
  if($(this).is(':checked') == true) {
    $(this).next('.toggle-group').find('.toggle-on').attr('tabindex', '-1').focus();
  } else {
    $(this).next('.toggle-group').find('.toggle-off').attr('tabindex', '-1').focus();
  }
});

Answer 2

一种略有不同的方法

var $toggle = $('input:checkbox');
var $toggleDiv = $toggle.parent();
$toggleDiv.attr('tabindex','0');                // allow focus
$toggleDiv.unbind('keypress').keypress((e) => { // have enter trigger toggle
    if (e.which===13) {
        e.preventDefault();
        var newState = $toggle.is(':checked') ? 'off' : 'on';
        $toggle.bootstrapToggle(newState);
    }
})

Bootstrap切换按钮无法访问

2 个答案: