gpt4 book ai didi

javascript - 如果在 Angular JS 中未选中复选框,则禁用按钮

转载 作者:行者123 更新时间:2023-11-30 15:24:59 29 4
gpt4 key购买 nike

所以我正在开发这个网络应用程序。我有一个类别列表,如果未选中列表中的项目,“保存”和“发布”按钮将被禁用。我知道 ng-disabled = !(ng-model name) 会这样做,但每次我加载页面时,按钮都被禁用,但当我检查项目时不会启用列表。

<a ng-if="status() < 2" href="#" data-ng-click="publish(true)" class="btn btn-sm btn-block btn-success" ng-disabled="!cat.IsSelected">{{lbl.publish}}</a>
<a ng-if="status() == 2" href="#" data-ng-click="save()" class="btn btn-sm btn-block btn-primary" id="check_box" ng-disabled="!cat.IsSelected">
{{lbl.save}}
</a>
<span ng-if="status() < 2">
<a href="#" ng-click="save()" class="btn btn-sm btn-block btn-primary" id="check_box" ng-disabled="!cat.IsSelected">
{{lbl.save}}
</a>
</span>

<ul class="categories-list">
<li ng-repeat="cat in lookups.CategoryList">
<label><input type="checkbox" id="cat-{{cat.OptionValue}}" data-ng-model="cat.IsSelected"/> {{cat.OptionName}}</label>
</li>
<li ng-if="lookups.CategoryList.length == 0" class="item-empty">{{lbl.empty}}</li>
</ul>

JS代码:

$scope.post.Categories = [];
if ($scope.lookups.CategoryList != null) {
for (var i = 0; i < $scope.lookups.CategoryList.length; i++) {
var cat = $scope.lookups.CategoryList[i];
if (cat.IsSelected) {
var catAdd = { "IsChecked": false, "Id": cat.OptionValue, "Title": cat.OptionName };
$scope.post.Categories.push(catAdd);
}
}
}

最佳答案

更新:使 fiddle 更接近实际场景。

包装你的 <a>在按钮中标记并放置 ng-dissabled

这是一个演示我将如何执行此操作的 jsfiddle:fiddle

<div ng-app="test" ng-controller="myController">
<button ng-click="save()" ng-disabled="!hasSelectedAnItem" class="btn btn-sm btn-block btn-primary">
Save
</button>
<ul class="categories-list">
<li ng-repeat="cat in items">
<label><input type="checkbox" id="cat-{{cat.OptionValue}}" ng-model="cat.IsSelected" ng-change="canBeSaved()"/> {{cat.OptionName}}</label>
</li>
</ul>
</div>

JS:

angular.module('test', [])

.controller('myController', ['$scope', function($scope) {
$scope.hasSelectedAnItem = false;

$scope.items = [
{OptionValue: 123, OptionName: "Adam", IsSelected: true},
{OptionValue: 234, OptionName: "Paul", IsSelected: false},
{OptionValue: 345, OptionName: "Jason", IsSelected: true},
{OptionValue: 464, OptionName: "Joe", IsSelected: false}
];

$scope.canBeSaved = function() {

var found = false;
$scope.items.forEach(function(item) {
if (item.IsSelected) {
alert("Here");
found = true;
}
});

$scope.hasSelectedAnItem = found;
}

$scope.save = function() {
alert($scope.cat.IsSelected);
}

$scope.canBeSaved();
}]);

关于javascript - 如果在 Angular JS 中未选中复选框,则禁用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43142514/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com