AngularJS toggle radio buttons with default selection.
HTML
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-app="miniapp">
<div ng-controller="Ctrl" class="cont">
<section >
<h2>
<input type="radio" name="somethign" value="1" ng-model="checkboxSelection"/> Checkbox 1
<input type="radio" name="somethign" value="2" ng-model="checkboxSelection"/> Checkbox 2
</h2>
<div>
All inside here should be enabled for Checkbox 1 only{{checkboxSelection}}
<br/>
<input type="button" ng-model="btn3" ng-disabled="isCheckboxSelected('1')" value="btn1"/>
<input type="button" ng-model="btn4" ng-disabled="isCheckboxSelected('1')" value="btn2"/>
<input type="text" ng-model="txt2" ng-disabled="isCheckboxSelected('1')" value="btn2"/>
--{{isCheckboxSelected('1')}}--
</div>
<div>
All inside here should be enabled for Checkbox 2 only<br/>
<input type="button" ng-model="btn3" ng-disabled="isCheckboxSelected('2')" value="btn1"/>
<input type="button" ng-model="btn4" ng-disabled="isCheckboxSelected('2')" value="btn2"/>
<input type="text" ng-model="txt2" ng-disabled="isCheckboxSelected('2')" value="btn2"/>
--{{isCheckboxSelected('2')}}--
</div>
</section>
</div>
</div>
CSS
.cont div{
border:2px solid red;
margin: 5px;
}
JavaScript
var $scope;
var app = angular.module('miniapp', []);
function Ctrl($scope) {
// Can replace this with: ng-init="checkboxSelection = '1'".
$scope.checkboxSelection = '1';
// Can use parseInt(x, 10) on $scope.checkboxSelection or index.toString() if you want to remove the single quotes you see in isCheckboxSelected('1').
$scope.isCheckboxSelected = function(index) {
return index === $scope.checkboxSelection;
};
}