1. 使用AngularJS让checkbox复选框实现，但限选两个checkbox复选框代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo演示</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
li {
list-style: none;
}
</style>
</head>
<body style="text-align: center;">
<h1>使用angularJS实现复选框多选，但一次只能限选2个</h1>
<div ng-app="myApp" ng-controller="myCtrl">
<ul class="vs-ul">
<li ng-repeat="instance in lists"><input type="checkbox" ng-model="instance.checked"
ng-disabled="instance.disabled"
ng-click="updateSelection($index)">{{instance.name}}
</li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.lists = [{
name: '第一个复选框测试1',
checked: false,
disabled: false
}, {
name: '第一个复选框测试2',
checked: false,
disabled: false
}, {
name: '第一个复选框测试3',
checked: false,
disabled: false
}, {
name: '第一个复选框测试4',
checked: false,
disabled: false
}
];
$scope.updateSelection = function (position) {
var counts = 0;
angular.forEach($scope.lists, function (instance, index) {
instance.disabled = false;
if (instance.checked) {
counts += 1;
}
});
console.log("checkbox复选框选中个数：", counts);
if (counts == 2) {
angular.forEach($scope.lists, function (instance, index) {
if (instance.checked == false) {
instance.disabled = true
}
})
}
};
});
</script>
</body>
</html>
2. 实现checkbox复选框限选功能效果图如下所示：
