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>
2 answers
solution1
0 ACCPTED 2017-09-19 20:18:21
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>
solution2
0 2017-09-19 21:04:14
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.