In this article I will explain with an example, how to allow only One (Single) CheckBox to be checked (selected) using AngularJS.
In a group of CheckBoxes, if one CheckBox is checked (selected) all other selected CheckBoxes will be unchecked (unselected) using AngularJS.
 
 
Allow only One (Single) CheckBox to be checked (selected) using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The AngularJS app HTML DIV consists of another HTML DIV with a CheckBox and Label elements. The ng-repeat directive has been applied to the HTML DIV in order to populate CheckBoxList i.e. List of multiple CheckBoxes from a JSON array.
The ng-model attribute of the CheckBox has been assigned the Selected property. Thus whenever a CheckBox is selected, the Selected property for the corresponding object in the JSON array will be set to TRUE.
The CheckBox has been assigned ng-change directive. When the CheckBox is checked, the CheckBox_Checked function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-change directive example.
 
Inside the function, a loop is executed over the JSON array and the FruitId of the selected (checked) CheckBox is matched with all the items of the JSON Array and the Selected property of all items except the selected (checked) CheckBox is set to False.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Fruits = [{
                FruitId: 1,
                Name: 'Mango',
                Selected: false
            }, {
                FruitId: 2,
                Name: 'Apple',
                Selected: false
            }, {
                FruitId: 3,
                Name: 'Banana',
                Selected: false
            }, {
                FruitId: 4,
                Name: 'Guava',
                Selected: false
            }, {
                FruitId: 5,
                Name: 'Orange',
                Selected: false
            }];
 
            $scope.CheckBox_Checked = function (selectedFruitId) {
                for (var i = 0; i < $scope.Fruits.length; i++) {
                    if ($scope.Fruits[i].FruitId != selectedFruitId) {
                        $scope.Fruits[i].Selected = false;
                    }
                }
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-repeat="fruit in Fruits">
            <label for="chkCustomer_{{fruit.FruitId}}">
                <input id="chkCustomer_{{fruit.FruitId}}" type="checkbox" ng-model="fruit.Selected" ng-change = "CheckBox_Checked(fruit.FruitId)" />
                {{fruit.Name}}
            </label>
        </div>
    </div>
</body>
</html>
 
 
Screenshot
AngularJS: Allow only One (Single) CheckBox to be checked (selected)
 
 
Demo
View Demo
 
 
Downloads
Download Code