Javascript 选中全部或一个复选框以启用提交按钮angularjs_Javascript_Angularjs

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

javascript angularjs

Javascript 选中全部或一个复选框以启用提交按钮angularjs,javascript,angularjs,Javascript,Angularjs,我对angularjs是新手。我正在尝试一个简单的程序，其中有复选框和一个禁用的按钮。选中一个或多个复选框后，应启用该按钮。然而，我的解决方案似乎不起作用。这方面的任何帮助都将是巨大的。 HTML代码： <html ng-app="Apps" ng-controller = "chk"> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angul

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

看起来您必须为禁用ng的每个复选框设置单独的条件才能检测更改。改用此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>


水果

苹果
香蕉
杏子
桃子

编辑

代码现在应该可以正常工作了。抱歉搞混了

这里有一种方法，您可以插入其他结果，而无需在

ng disabled

中更改代码：

var-Apps=angular.module（'Apps'，[]）
应用程序控制器（“chk”，功能（$scope）{
$scope.chkd={
苹果：错，
香蕉：错，
杏子：错，
桃子：错
};
$scope.enableSubmit=函数（）{
var atLeastOneSelected=[]；
对于（var fruit在$scope.chkd中）{
if（$scope.chkd[fruit]==true）{
已选择至少一个。按（水果）；
}
}
返回！（至少选定了一个。长度>0）；
}
});

水果

{{lbl}}


哪里定义了chkd
呢？哦，必须在控制器中定义ng模型（chkd）？每次有人使用？：
以true
和false
作为值时，小猫都会哭。只需使用ng disabled=“！（cb01 | | cb02 | | cb03 | | cb04）”。此外，将所有复选框包装在一个标签中会导致在单击单词时选中所有复选框。@Hereticsmonkey我不太使用Angular，我更喜欢Electron，所以我只查看了文档。此外，即使包装在单个标签中，它也可以正常工作。不知道为什么它不会：）试试看：它只勾选和取消勾选第一个复选框，当点击时，说“桃子”。标签意味着为单个HTML表单元素添加标签。我很抱歉。我才意识到我错了。我的fiddle代码没有用标签包装，哈哈，我坐在这里想“如果我的代码工作得很好，发生了什么？”谢谢@jl。然而，我希望有一个解决方案，使用ng repeat添加复选框。这是伟大的@Jose Rojas。请问如果数据（水果）不是硬编码在chked对象中，该怎么办？而是以json的形式动态地来自api？谢谢；）@MSA AngularJS有$http服务从API检索数据，更多信息如下：，您的数据看起来如何？
<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>