复选框列表不适用于下拉选择答案

【问题标题】：Checkbox lists not working with dropdown selection复选框列表不适用于下拉选择
【发布时间】：2017-09-19 19:51:19
【问题描述】：

我对编码和尝试开发一个显示不同下拉列表的下拉框相当陌生。我设法创建了下拉列表并选择了正确的复选框列表，但是一旦选择了下拉选项，在使用它时不会应用限制。当使用下拉选择之外的复选框时，限制集按我的预期工作。

我当前的代码是：

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

【问题讨论】：

复制和粘贴的这段代码似乎可以正常工作：jsfiddle.net/yedyL7hr你能澄清问题所在吗？
当我选择下拉选项“Dogs”并且第一个列表出现在其中时，不会限制复选框的选择。我在“教程”下有第二个列表，它再次不限制选择。但是当在下拉列表之外使用时，它们会受到限制。
我假设您在相同的内容中使用 Angular -> ng-app 和 jQuery。我不会推荐它。不清楚你想在这里用 ngSwitch 归档什么，只显示部分复选框？
我明白了。下拉选择将显示完整列表，但我想限制可以进行多少选择。例如，在第一个选择“狗”中，我有 7 个复选框，但希望限制为 3 个选择。然后在第二个选项“教程”中，我想从 3 个选项中选择 1 个。

标签： javascript html checkbox drop-down-menu

【解决方案1】：

根据this answer，您需要将事件委托与您的 jquery 事件一起使用，因为 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>

【讨论】：

请注意 jquery 和 angular 在大多数情况下不应混淆：stackoverflow.com/questions/30007792/…

【解决方案2】：

我用 angular 创建了完整的解决方案 :) 希望这是你想要的，我花了一些时间！

你在这里找到我的小提琴：http://jsfiddle.net/smoki99/LrLyr6L3/2/

您可能还需要在您身边添加角度：

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

这是我的 HTML 代码：

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

这是我的 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;
}  

}

更详细的解释：

你应该使用带有角度的 MVC，所以复选框的值应该保存在模型中。

我创建了两个数组：

狗和狗

声明将在“控制器”函数中完成：

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

现在，您可以修改（即时或使用 ajax 选项的名称和值，如果它们被选中，则存储在对象的“selected”属性中。

为了显示数组，使用了“ng-repeat”，它或多或少与“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>

因此它为每个“dogs”条目创建一行，我们附加定义了“selected”属性的值并调用“change”一个方法，带有 3 个参数：

元素 -> 这里是狗

收藏 -> 这里是狗

限制 -> 我们想要最多 3 个选择

此检查将使用控制器中定义的此方法完成：

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

这里我们简单地遍历所有选定的元素，如果我们有更多作为限制，我们将当前条目设置回“false”。

希望这个解释对你有帮助！

【讨论】：

感谢您的回答，非常感谢。它在 JSFiddle 中有效，但当我出于某种原因将其引入我的代码时则无效。谢谢。
我认为您缺少 CDN 链接，我现在将其添加到答案中！
如果您需要一个带有 jquery 而不是 angular 的示例，请告诉我