如何在提交前选择单选按钮

Posted 2023-03-05

【中文标题】如何在提交前选择单选按钮

【英文标题】：How to make selecting a radio button required before submitting

【发布时间】：2013-05-22 12:44:55

【问题描述】：

我有一系列问题可以选择单选答案。我不知道如何使用 AngularJS 验证来要求用户在单击“下一步”之前选择一个。以下是我的代码：

编辑：请注意，单击“下一步”会根据做出的选择从控制器获取下一个问题节点。它基本上是一个动态问卷。

<form novalidate>
   <div class="radio" ng-repeat="answer in node.Answers">
      <input type="radio" name="answerGroup" ng-model="$parent.selectedAnswer" 
         value="answer.BranchId,node.LeafId,answer.Id"/> answer.Text 
   </div>
   <div>
      <input type="button" ng-click="previous()" value="Previous"/>
      <input type="button" ng-click="next(selectedAnswer)" value="Next"/>
   </div>
</form>

【问题讨论】：

如果您在您的<form> 上使用ng-submit 是否有效，如果$parent.selectedAnswer 有值，您可以使用return true 或return false？

【参考方案1】：

看下面，使用 ng-show 显示一个错误消息，应该没有单选按钮被点击。

                          <label for="dateofbirth">
                            <span>Are you the primary cardholder?</span>
                            </label>
                            <ul>
                              <li>
                                <label for="yes">
                                  <input type="radio" id="yes" name="cardholder" ng-model="user.cardholder" value="yes" required/>
                                  Yes
                                </label>
                              </li>
                              <li>
                                <label for="no">
                                  <input type="radio" id="no" name="cardholder" ng-model="user.cardholder" value="no" required/>
                                  No
                                </label>
                              </li>
                            </ul>
                        </fieldset>
                        <span class="error" ng-show="myForm.cardholder.$error.required && submitted == true"><i class="fa fa-exclamation-circle"></i>Please select an answer.</span>

【参考方案2】：

编辑： Here is a working fiddle

首先给表格起个名字，以便你可以参考它：

<form name="myForm" novalidate>

接下来将required 属性添加到单选按钮：

<input type="radio" name="answerGroup" required
    ng-model="$parent.selectedAnswer"
    value="answer.BranchId,node.LeafId,answer.Id"/>

然后使用ng-disabled将你的next按钮的disabled属性绑定到单选按钮的有效性：

<input type="button" ng-click="next(selectedAnswer)" value="Next"
    ng-disabled="myform.answerGroup.$invalid" />

【讨论】：

谢谢，但有两个问题： 1. 我必须单击单选按钮两次才能启用下一步按钮。 2. 我有一系列问题，所以一旦启用 Next，那么它会保持启用以进行后续问题。如何在每一步都禁用它？

对不起，我应该给你更多信息。我将编辑我的问题以添加更多信息。

1.这听起来像是一个范围界定问题。如果您必须单击两次，我怀疑来自$parent.selectedAnswer 的意外行为。 2. 成功单击next 时，您需要使单选按钮无效。如果可能的话，也许添加一个小提琴/plunker。

是的，唯一的事情是我在加载函数中发出 ajax 请求以获取节点。尽管如此，我已经在这里创建了它，但由于 ajax 请求，它显然无法工作：plnkr.co/edit/5lEeW4Db5XPWruNO6MMQ

我不确定如何绕过 $parent.selectedAnswer。我得到了关于不要使用它的建议，但是没有它我不知道如何让它工作。