Bootstrap3 单选按钮不适用于键盘

Bootstrap3 Radio Button not working with keyboard

我正在使用 Bootstrap3、html、css、php。如果可能的话，我不使用 javascript，或者 jquery。

我想制作一个包含几个问题的表格，答案是：是、否、未回答。 Bootstrap3 有单选按钮，看起来很理想，而且效果很好——如果我使用鼠标的话。但是，如果我切换到按钮并按 space，Bootstrap 似乎严重损坏。按钮值未发布。或者，如果我单击“是”按钮，然后使用箭头键更改为“否”并提交表单，“是”值仍会发布。这是在 Linux Mint 上的 Firefox 36.0。

有谁知道如何让单选按钮与键盘一起工作？

这里是示例代码 (test2.php):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>
<body>
<?php
  echo "<p>Value: ".$_POST["tstRadio"]."</p>";
?>
  <div class="page-wrapper">
    <form class="form-horizontal"
          action="test2.php"
          method="POST">
      <div class="form-group">
        <div class="col-xs-12 col-sm-9">
          <label class="control-label" for="tstRadio" >Question</label>
        </div>
        <div class="col-xs-12 col-sm-3">
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary"><input type="radio" name="tstRadio" value="yes" >Yes</label>
            <label class="btn btn-primary"><input type="radio" name="tstRadio" value="no" >No</label>
          </div>
        </div>
      </div>
      <button type="submit"
              class="btn btn-primary btn-large"
              name="send"
             >Click to Submit Application</button>
      <p>&nbsp;</p>
    </form>
  </div>
  <script src="bootstrap/js/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

这显示发布的值和单选按钮。我遗漏了我放在网站上的所有样式。

单击“是”按钮，选择“是”按钮（阴影有细微变化——我有一些 CSS 使其更明显，但没有它就会出现问题）然后在提交上，值 "yes" 已发布。单击否，然后单击提交，显示已发布的 "no"。只需单击提交，没有发布值。目前还不错。

接下来，在新表单上，我按 Tab 键。第一个问题：我看不到哪个控件具有焦点。我按 space。选择是。啊哈——那才是重点。点击提交。但是发布的值是空的！

接下来，单击“是”。按 T​​ab，右箭头。现在选择了否按钮。单击提交。发布的值为 "yes" - 与用户预期的完全相反！

让我担心的是，人们可能让单选按钮显示某些答案，然后提交表单，并记录了错误的答案。我对过去记录的内容无能为力，但将来如何防止？

很抱歉回答我自己的问题，但我在其他地方遇到了一个 post 至少部分解决了这个问题。

在 https://github.com/twbs/bootstrap/issues/6570 有一个 post 由 TurboKia 在其中替换了

中的 "label" 
<label class="btn btn-primary"><input type="radio" name="tstRadio" value="yes" >Yes</label>

与"button"，即

<button class="btn btn-primary"><input type="radio" name="tstRadio" value="yes" >Yes</button>

我不明白这个。当我查看如何在 Bootstrap 中进行单选按钮组时，例如 http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-buttons.php 它说要使用