javascript - 选中全部或一个复选框以启用提交按钮angularjs-6ren

javascript - 选中全部或一个复选框以启用提交按钮angularjs

转载作者：行者123 更新时间：2023-11-29 23:07:49

我是 angularjs 的新手。我正在尝试一个简单的程序，它有复选框和一个禁用的按钮。选中一个或多个复选框后，应启用该按钮。但是，我的解决方案似乎不起作用。在这方面的任何帮助都会很棒。HTML代码:

   <html ng-app="Apps" ng-controller = "chk">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="Apps.js"></script>
</head>
<body>
<center>
<h1> Fruits </h1>
<hr/>
<div >

<label ng-repeat="lbl in lbls">
  <input type="checkbox" ng-model="chkd" > {{lbl}}
</label>
<br>
<input type="button" value="Submit" ng-disabled="!chkd"/>
</div>
</center>
</body>
</html>

这是 JS 文件:

    var Apps = angular.module ('Apps', [])
Apps.controller("chk", function($scope){

$scope.lbls = [
    'Apples', 
    'Bananas', 
    'Apricots', 
    'Peaches'
  ];

});

最佳答案

看起来您必须为每个复选框设置单独的条件，以便 ng-disabled 检测到更改。请改用此 HTML 布局:

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> 
        </script>
    </head>
    <body>
        <center>
        <h1> Fruits </h1>
        <hr/>
        <div ng-app>
            <input type="checkbox" ng-model="cb01"> Apples
            <input type="checkbox" ng-model="cb02"> Bananas
            <input type="checkbox" ng-model="cb03"> Apricots
            <input type="checkbox" ng-model="cb04"> Peaches
            <br>
            <input type="button" value="Submit" ng-disabled="!(cb01||cb02||cb03||cb04)">
        </div>
        </center>
    </body>
</html>