JSFiddle - React, Tailwind, and code Playground

by Luis Felipe Morais

HTML

<body ng-app="myApp">
    <div ng-controller="MainCtrl">
        <select-max-checkbox checkboxes="cards" max-selected="2"></select-max-checkbox>
        <div ng-repeat="item in cards">
            <input type="checkbox" ng-model="item.isSelected" ng-disabled="item.isDisabled" />{{item.text}}</div>
    </div>
</body>

CSS

*{zoom:1.1;}

JavaScript

angular.module('myApp', []);

function MainCtrl($scope) {
    $scope.cards = [{
        isSelected: false,
        isDisabled: false,
        text: "Master -1"
    }, {
        isSelected: false,
        isDisabled: false,
        text: "Master -2"
    }, {
        isSelected: false,
        isDisabled: false,
        text: "Master -3"
    }, {
        isSelected: false,
        isDisabled: false,
        text: "Master -4"
    }];
}

angular.module('myApp').directive('selectMaxCheckbox', function () {
    return {
        restrict: 'E',
        scope: {
            checkboxes: '=',
            maxSelected: '=maxSelected'
        },
        controller: function ($scope, $element) {

            $scope.$watch('checkboxes', function () {
                var maxSelected = $scope.maxSelected,
                    countSelected = 0;
                angular.forEach($scope.checkboxes, function (cb) {
                    if (cb.isSelected) {
                        countSelected++;
                    }
                });
                angular.forEach($scope.checkboxes, function (cb) {
                    if ($scope.maxSelected <= countSelected) {
                        if (!cb.isSelected) {
                            cb.isDisabled = true;
                        }
                    } else {
                        cb.isDisabled = false;
                    }
                });
            }, true);
        }
    };
});