Working with ng-change on checkbox to prevent check in some cases


#1

Hey guys i’m with a little trouble working with checkboxes and ng-change, let me explain the situation.

I have 25 checkboxes that are numbers between 1 and 25, in sequence. Every checkbox has it own value( 1, 2, 3, 4, …)

What i need is to prevent the user to check more than 15 checkboxes. What is the best way to do this?

Here is my code that creates the checkboxes:

    <div class="row" ng-repeat="n in [0, 4] | makeRange">
        <div class="col" ng-repeat="p in [1, 5] | makeRange">
            <ul class="list">
                <li class="item item-checkbox">
                    <label class="checkbox">
                        <input type="checkbox" ng-change="checkNumbers()" checklist-model="game.numbers" checklist-value="n*5+p" value="{{n*5+p}}">
                    </label>
                    {{n*5+p}}
                </li>
            </ul>
        </div>
    </div>

The checkboxes are rendered like this:

As you can see, i already created a “checkNumbers()” function that runs on every checkbox changes (ng-change) but now i don’t know how to force the application to stop checking the checkboxes if there is already 15 checkboxes checked.

Thanks in advance !


#2

Can you put together a codepen for this? I can take a look at it as seen what’s the best way to solve this.