为什么单选按钮在移动设备上不起作用？答案

【问题标题】：Why does radio button not function on mobile?为什么单选按钮在移动设备上不起作用？
【发布时间】：2016-04-07 15:22:56
【问题描述】：

我建立了一个在线面试。该表单使用 Angular.js 和 Bootstrap 来显示问题和答案。每个答案都附有一个分数，该分数在最后被求和并总计为测试分数。

该应用程序在 Chrome 和 Safari（都是桌面应用程序）上运行良好，在 Chrome 开发工具中，它可以很好地模拟多种移动屏幕。但是，当我在实际的移动设备上查看应用程序时，我无法在单选按钮中选择答案。我可以做些什么来调试？

Angular.js 可能是原因吗？也许这是 Bootstrap 的一个已知问题？如何进行故障排除和修复？

Live Site（目前可在桌面上运行（2016 年 4 月 7 日），但不适用于移动设备）： http://libertas-security466.info/interview

test.html（每个问题/答案集的模板）

<div class="container">
    <div class="row">

        <div class="col-sm-12">
            <h1>{{question.text}}</h1>
            <p ng-show="question.subtext">{{question.subtext}}</p>
        </div>
        <div class="col-sm-12">
            <p>Remaining Questions: {{questionsLeft}}</p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <form class="form">
                <div class="form-group">
                    <div class="input-group" ng-repeat="answer in question.answers">
                        <div class="input-group-addon">
                            <input type="radio" name="radioGroup" ng-model="selectedAnswer" value="{{answer.text}}" ng-click="setCurrentAnswer(answer)">
                        </div>
                        <label class="form-control">
                            {{answer.text}}
                        </label>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-xs-12">&nbsp;</div>
        <div class="col-sm-3 col-sm-offset-9 text-center">
            <button ng-click="answer(currentAnswer)" class="btn btn-large btn-primary">Select Answer</button>
        </div>
    </div>
</div>

index.html

<!DOCTYPE html>
<html ng-app="FreemasonTest">
    <head>
        <title>Are you ready?</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="lib/jquery-ui-1.11.4/jquery-ui.min.css" type="text/css" />
        <link rel="stylesheet" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" type="text/css" />
        <script type="text/javascript" src="lib/jquery/jquery-2.2.2.min.js"></script>
        <script type="text/javascript" src="lib/jquery-ui-1.11.4/jquery-ui.min.js" ></script>
        <script type="text/javascript" src="lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script> 
        <script type="text/javascript" src="javascript/app.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="javascript/routes.js"></script>
    </head>
    <body>
        <script type="text/javascript" src="javascript/model/AssessmentModel.js"></script>
        <script type="text/javascript" src="javascript/questions.js"></script>
        <script type="text/javascript" src="javascript/needs.js"></script>
        <script type="text/javascript" src="javascript/controllers/TestController.js"></script>
        <script type="text/javascript" src="javascript/controllers/ResultsController.js"></script>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Libertas-Security Lodge #466</a>
                </div>
            </div>
        </nav>
        <div ng-view></div>
    </body>
</html>

【问题讨论】：

在移动设备上，按钮似乎被禁用 - imgur.com/PGxyCS4
我看不出问题的原因，如果你有安卓，你可以像这样调试 - developers.google.com/web/tools/chrome-devtools/debug/…
收音机实际上并没有被禁用，但您帮助我找到了真正的问题。谢谢！
有这样的答案，试试看：-stackoverflow.com/questions/50927406/… -stackoverflow.com/questions/51681813/…
@RiccardoGangi，感谢您的意见，但您链接的答案是在我找到所需答案两年后发布的。在发布其他帮助之前，请检查问题是否已得到解答。 ;) 保持真棒。

标签： angularjs twitter-bootstrap mobile

【解决方案1】：

@KieranDotCo 提供了我需要的方向。这个问题的解决方法分为两部分：

如何排除故障？
怎么了？

== 疑难解答 ==

developers.google.com/web/tools/chrome-devtools/debug/… 上的说明提供了我查找和追踪解决方案所需的一切。

== 让应用工作 ==

问题不在于 Angular.js。从技术上讲，Bootstrap 也不是问题，而是 Bootstrap CSS 导致了问题。

我让默认列定义为 XS 屏幕尺寸定义按钮 div。在 Chrome 调试器（下图）中，我们将看到包含用于选择答案的 <button> 元素的 <div> 具有将其放置在我的单选按钮上方的尺寸。这意味着每次我尝试单击单选按钮时，“选择答案”按钮周围的空白区域都会抓住我的事件并将其围绕单选按钮冒泡到位于它们后面的正文元素。

在上图中，我们看到，当我们选择应该覆盖按钮的<div> 元素时，只有在单选按钮前面有一个突出显示区域的按钮。

问题的答案在于更改此 div 的类以指定 XS 屏幕的行为。将“col-xs-12”添加到按钮 div 后，div 不再位于单选按钮的前面，我可以根据需要选择选项。

在上图中，我们像以前一样突出显示 <div>，但现在我们看到 div 不大于包含 <button> 的行。 “col-xs-12”类“修复”了<div> 尺寸，从而修复了应用程序。

== 谢谢== 非常感谢 @KieranDotCo 向我介绍了 Google Chrome 桌面应用程序的这一强大功能。你为我打开了一个全新的调试世界！

【讨论】：

没问题 :) 感谢您发布有关如何解决问题的详细答案！
这正是我的问题。非常感谢李斯特先生和贾里德！