AngularJS Example:

by Christian Mueller

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<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>
             ...

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;
  }  

}