Disable Radio Buttons Until Button Clicked

Question

Sorry if this seems a simple question but I can't figure it out or find a solution anywhere. I am new to angularJS and have a webpage which has two radio buttons and a "Details" button.

Obviously the website is written in angularJS and also using twitter bootstrap.

The question is a "Has the details been checked?" with a "Yes" and "No" radio button.

Clicking the "Details" button opens a modal with a "Close" button on it and details in it.

What I'm after is for these radio buttons to be disabled until the "Details" button has been clicked or once the "Close" button has been clicked from the modal (which ever is the best solution).

The only code I can provide is my HTML. I need it to be done without using 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

You have to look for the ngDisabled directive.

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

Edit

Since you added a code example, something like this should do the trick:

<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>

Add $scope.enableRadioButtons = true; to the opendatachecksmodel() method.

You could set the flag true when you close the modal as well.