Checkbox lists not working with dropdown selection

Question

I am fairly new to coding and trying to develop a dropdown box that displays different drop down lists. I have managed to create the dropdown and it selects the correct checkbox lists, however the limit does not get applied when using it once the dropdown option has been selected. When using the checkboxes outside of the dropdown selection the limit set works as I would expect.

My current code is:

<body ng-app="">
    <div class="container">
        <div class="form-group">
            <div class="row">
                <div class="col-sm-8">
                    <div ng-switch="myVar">
                        <div ng-switch-when="dogs">
                            <div class="pricing-levels-3">
                                <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
                            </div>
                        </div>
                        <div ng-switch-when="tuts">
                            <div class="pricing-levels-2">
                                <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
                                <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 1<br>
                                <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 2<br>
                                <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 3<br>
                            </div>
                        </div>
                        <div ng-switch-when="cars">
                            <h1>Cars</h1>
                            <p>Read about cars.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h1>Select a topic:</h1>
                    <select ng-model="myVar" class="form-control">
                      <option value="dogs">Dogs</option>
                      <option value="tuts">Tutorials</option>
                      <option value="cars">Cars</option>
                   </select>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var limit = 3;
    $('input.single-checkbox').on('change', function(evt) {
        if ($(this).siblings(':checked').length >= limit) {
            this.checked = false;
        }
    });
</script>
<script type="text/javascript">
    var limit1 = 1;
    $('input.single-checkbox1').on('change', function(evt) {
        if ($(this).siblings(':checked').length >= limit1) {
            this.checked = false;
        }
    });
</script>

This code, copied and pasted, appears to work as expected: jsfiddle.net/yedyL7hr Can you clarify what the problem is? — David
– David, Commented Sep 19, 2017 at 19:55
When i select the dropdown option "Dogs" and the first list appears within it does not limit the checkbox selection. I have the second list under "tutorials" and it again does not limit the selection. But when used outside of the drop down they work with the limit. — Georgeehall
– Georgeehall, Commented Sep 19, 2017 at 19:57
I assume you using Angular -> ng-app and jQuery in the same content. I wouldn't recommend it. It is not really clear what you want to archive with ngSwitch here, to only show a part of the checkboxes? — Christian Müller
– Christian Müller, Commented Sep 19, 2017 at 20:10
I see. The dropdown selection will show the full list but then i want to limit how many selections can be made. For example in the first selection "dogs" i have 7 checkboxes but want to limit to 3 choices. Then in the second option "tutorials" i want to select 1 out of 3. — Georgeehall
– Georgeehall, Commented Sep 19, 2017 at 20:15

steve v · Accepted Answer · 2017-09-19 20:18:21Z

Per this answer you need to use event delegation with your jquery event because angular is causing the content to be dynamic.

Change your code to:

$(document).on('change','input.single-checkbox', function() {

        if ($(this).siblings(':checked').length >= limit) {
            this.checked = false;
        }
});

and

$(document).on('change','input.single-checkbox1', function() {
        if ($(this).siblings(':checked').length >= limit1) {
            this.checked = false;
        }
});

and it should work properly.

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

function MyCtrl($scope) {
    $scope.myVar = "";
}

    var limit = 3;
    $(document).on('change','input.single-checkbox', function() {
    
        if ($(this).siblings(':checked').length >= limit) {
            this.checked = false;
        }
    });


	var limit1 = 1;
    $(document).on('change','input.single-checkbox1', function() {
        if ($(this).siblings(':checked').length >= limit1) {
            this.checked = false;
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" ng-app="myApp">
        <div class="form-group">
            <div class="row">
                <div class="col-sm-8">
                    <div ng-switch="myVar">
                        <div ng-switch-when="dogs">
                            <div class="pricing-levels-3">
                                <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
                            </div>
                        </div>
                        <div ng-switch-when="tuts">
                            <div class="pricing-levels-2">
                                <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
                                <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 1<br>
                                <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 2<br>
                                <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike">Level 3<br>
                            </div>
                        </div>
                        <div ng-switch-when="cars">
                            <h1>Cars</h1>
                            <p>Read about cars.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h1>Select a topic:</h1>
                    <select ng-model="myVar" class="form-control">
                      <option value="dogs">Dogs</option>
                      <option value="tuts">Tutorials</option>
                      <option value="cars">Cars</option>
                   </select>
                </div>
            </div>
        </div>
    </div>

Be aware that jquery and angular should in the most cases not be mixed up: stackoverflow.com/questions/30007792/…

Christian Müller · Accepted Answer · 2017-09-20 06:29:25Z

I created the complete solution in angular :) Hope this it what you want, cost me some time!

My fiddle you find here: http://jsfiddle.net/smoki99/LrLyr6L3/2/

You maybe need also add angular to your side:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

This is my HTML Code:

<div ng-app>
<div ng-controller="controller">
    <div class="container">
        <div class="form-group">
            <div class="row">
                <div class="col-sm-8">
                    <div ng-switch="myVar">
                        <div ng-switch-when="dogs">
                            <div class="pricing-levels-3">
                                <p><strong>Which level would you like? (Select 3 Levels)</strong></p>
                                <div ng-repeat="dog in dogs">
                                <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike" ng-model="dog.selected" ng-change="checkSelection(dog,dogs,3);">{{dog.name}}<br>
                                </div>

                            </div>
                        </div>
                        <div ng-switch-when="tuts">
                            <div class="pricing-levels-2">
                                <p><strong>Which level would you like? (Select 1 Levels)</strong></p>
                                <div ng-repeat="tut in tuts">
                                <input class="single-checkbox1" type="checkbox" name="vehicle" value="Bike" ng-model="tut.selected" ng-change="checkSelection(tut,tuts,1);">{{tut.name}}<br>
                                </div>

                            </div>
                        </div>
                        <div ng-switch-when="cars">
                            <h1>Cars</h1>
                            <p>Read about cars.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h1>Select a topic:</h1>
                    <select ng-model="myVar" class="form-control">
                    <option value="dogs">Dogs</option>
                    <option value="tuts">Tutorials</option>
                    <option value="cars">Cars</option>
                </select>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

And this is my Javascript:

function controller($scope) {
$scope.myVar = "dogs";

$scope.dogs = [
    { name: "level1", selected: false },
    { name: "level2", selected: false },
    { name: "level3", selected: false },
    { name: "level4", selected: false },
    { name: "level5", selected: false },
    { name: "level6", selected: false },
    { name: "level7", selected: false }
];

$scope.tuts = [
    { name: "level1", selected: false },
    { name: "level2", selected: false },
    { name: "level3", selected: false }
];

// check if not more than 3 level are checked
$scope.checkSelection = function (entry, collection,limit) {
        // dont check on unselect
        if(entry.selected==false)
        return;

    var count=0;
    angular.forEach(collection, function(e) {
    if (e.selected===true) count++;
    });

    if (count>limit)
        entry.selected=false;
}  

}

More Detailed explaination:

You should use MVC with angular, so the values of the checkboxes should be saved in models.

I created two arrays:

Dogs and Tuts

The declaration will be done in the "controller" function:

$scope.dogs = [
    { name: "level1", selected: false },
    { name: "level2", selected: false },
    { name: "level3", selected: false },
    { name: "level4", selected: false },
    { name: "level5", selected: false },
    { name: "level6", selected: false },
    { name: "level7", selected: false }
];

With this you can now modify (on the fly or with ajax the names of the options and the value, if they are selected are stored in the "selected" attribute of the object.

For display the array the "ng-repeat" is used, which is more or less the same as "foreach":

<div ng-repeat="dog in dogs">
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike" ng-model="dog.selected" ng-change="checkSelection(dog,dogs,3);">{{dog.name}}<br>
</div>

So it creates for each "dogs" entry a line and we attach the value with the "selected" attribute defined and call on "change" a method, with 3 parameters:

Element -> here the dog

Collection -> here the dogs

Limit -> We want 3 maximal selections

This check will be done with this method defined in the controller:

// check if not more than 3 level are checked
$scope.checkSelection = function (entry, collection,limit) {
        // dont check on unselect
        if(entry.selected==false)
        return;

    var count=0;
    angular.forEach(collection, function(e) {
    if (e.selected===true) count++;
    });

    if (count>limit)
        entry.selected=false;
}

Here we simply go throu all the selected elements and if we have more as the limit, we set the current entry back to "false".

I hope this explaination helps you!

Thank you for your answer and I appreciate it. It works in JSFiddle, but not when i bring this in to my code for some reason. Thank you.
I think you are missing the CDN Link and I now added it to the answer!
And please let me know, if you need a example with jquery and not with angular

Collectives™ on Stack Overflow

Checkbox lists not working with dropdown selection

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related