angular, require 1 radio button to be checked to perform action

Question

I have some radio buttons set on items (none are checked to begin with) that I have associated a button press. I would like this action NOT to do anything if no radios are checked off (because it requires information of one of the radios).

So I just have this button:

<button class="openButton" ng-click="showSubLevel = ! showSubLevel">Add Sub Level</button>

Which opens another div using

<div class="addSubLevel" ng-show="showSubLevel">

However I would like the button to do nothing (or alert the user) that they have to select a radio to open the .addSubLevel div.

The radios just look this like this :

<input type="radio" name="instructionLevelChecker">

As I'm not sure what I have to add to them to make this work. Appreciate any input, as I am still new to angular. Thanks!

Seketman Seketman · Accepted Answer · 2014-08-25T18:05:04

You can add ng-disabled="none-checked" to button:

<button class="openButton" ng-click="showSubLevel = ! showSubLevel" ng-disabled="none-checked">Add Sub Level</button>

..and set the none-checked variable to false when the user check the first radio button:

<input type="radio" name="instructionLevelChecker" ng-click="changeState()>

Javascript in your controller:

$scope.none-checked = true;
$scope.changeState = function () {
   $scope.none-checked = false;
}

Hope this help you.

angular, require 1 radio button to be checked to perform action

1 Answers