我对编码相当陌生，并试图开发一个显示不同下拉列表的下拉框。我已经成功创建了下拉列表，并且它选择了正确的复选框列表，但是一旦选择了下拉选项，使用它时就不会应用限制。当使用下拉选择之外的复选框时，限制集按我的预期工作。
我当前的代码是:
<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 answer您需要在 jquery 事件中使用事件委托(delegate)，因为 Angular 导致内容动态。
将代码更改为:
$(document).on('change','input.single-checkbox', function() {
if ($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
和
$(document).on('change','input.single-checkbox1', function() {
if ($(this).siblings(':checked').length >= limit1) {
this.checked = false;
}
});
它应该可以正常工作。
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>关于javascript - 复选框列表不适用于下拉选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46308719/