Question

我很擅长编码并尝试开发一个显示不同下拉列表的下拉框。我已设法创建下拉列表并选择正确的复选框列表，但是一旦选择了下拉选项，则在使用时不会应用限制。使用下拉选项之外的复选框时，限制集的工作方式与我期望的一样。

我目前的代码是：

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

Answer 1

每this answer你需要在你的jquery事件中使用事件委托，因为angular会导致内容是动态的。

将您的代码更改为：

bat """
    @echo off
    echo using System.Reflection; >CustomVersion.cs
    echo using System.Resources; >>CustomVersion.cs
    echo [assembly: AssemblyVersion("1.2.%BUILD_NUMBER%.0")] >>CustomVersion.cs
    echo [assembly: AssemblyFileVersion("1.2.%BUILD_NUMBER%.0")] >>CustomVersion.cs
"""

和

$(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;
        }
    });

Answer 2

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

我在这里找到你的小提琴：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与angular一起使用，因此复选框的值应保存在模型中。

我创建了两个数组：

狗与狗

声明将在＆＃34;控制器＆＃34;功能：

$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选项的名称和值，如果它们被选中，则存储在对象的＆＃34; selected＆＃34;属性中。

用于显示数组＆＃34; ng-repeat＆＃34;使用，与＆＃34; foreach＆＃34;或多或少相同：

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

因此它为每只狗创造了＃34;输入一行，我们将值附加到＆＃34;选择＆＃34;属性定义并调用＆＃34;更改＆＃34;一个方法，有3个参数：

元素 - ＆gt;这里的狗

收藏 - ＆gt;这里的狗

限制 - ＆gt;我们想要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;
}

这里我们只是选择所有选定的元素，如果我们有更多的限制，我们将当前条目设置回＆＃34; false＆＃34;。

我希望这个解释可以帮助你！

复选框列表不使用下拉列表选择

2 个答案: