禁用单选按钮，直到单击按钮

Question

抱歉，这似乎是一个简单的问题，但我无法解决，也找不到任何解决方案。 我是angularJS的新手，它的网页上有两个单选按钮和一个“详细信息”按钮。

显然，该网站是用angularJS编写的，还使用了twitter bootstrap。

问题是“是否检查了详细信息？” 带有“是”和“否”单选按钮。

单击“详细信息”按钮将打开一个带有“关闭”按钮及其详细信息的模式。

我要做的是禁用这些单选按钮，直到单击“详细信息”按钮或从模态中单击“关闭”按钮为止（这是最佳解决方案）。

我可以提供的唯一代码是HTML。 我需要在不使用JQuery的情况下完成它。

<div class="row" style="margin-bottom: 5px">
    <label class="col-sm-6 col-md-5" style="padding-top: 10px;">Have sufficient checks been performed?</label>
    <div class="col-sm-2" style="padding-top: 6px;">
        <input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="Yes" required />Yes &nbsp;
        <input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="No" required />No
    </div>
    <div class="col-sm-2" style="padding-left: 0px">
        <button type="button" class="btn btn-success" ng-click="opendatachecksmodal()" title="Click to see details.">Data Checks</button>
    </div>
</div>

Answer 1

您必须寻找ngDisabled指令。

<input type="radio" ng-disabled="!enableRadioButton">
<button ng-click="enableRadioButton = true">Details</button>

编辑

由于您添加了代码示例，因此可以实现以下目的：

<div class="row" style="margin-bottom: 5px">
    <label class="col-sm-6 col-md-5" style="padding-top: 10px;">Have sufficient checks been performed?</label>
    <div class="col-sm-2" style="padding-top: 6px;">
        <input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="Yes" required ng-disabled="enableRadioButtons" />Yes &nbsp;
        <input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="No" required ng-disabled="enableRadioButtons" />No
    </div>
    <div class="col-sm-2" style="padding-left: 0px">
        <button type="button" class="btn btn-success" ng-click="opendatachecksmodal()" title="Click to see details.">Data Checks</button>
    </div>
</div>

添加$scope.enableRadioButtons = true; 到opendatachecksmodel()方法。

您也可以在关闭模式时将标志设置为true。