選中所有或一個復選框以啟用提交按鈕 angularjs

Question

我是 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'
  ];

});

Answer 1

看起來您必須為 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>

提琴手

編輯代碼現在應該可以正常工作了。 對困惑感到抱歉！

Answer 2

這是一種您可以插入其他水果的方法，而無需更改ng-disabled代碼：

 var Apps = angular.module ('Apps', []) Apps.controller("chk", function($scope){ $scope.chkd = { Apples: false, Bananas: false, Apricots: false, Peaches: false }; $scope.enableSubmit = function(){ var atLeastOneSelected = []; for (var fruit in $scope.chkd) { if($scope.chkd[fruit] === true){ atLeastOneSelected.push(fruit); } } return !(atLeastOneSelected.length > 0); } });

 <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, enabled) in chkd"> <input type="checkbox" ng-model="chkd[lbl]"> {{lbl}} </label> <br> <input type="button" value="Submit" ng-disabled="enableSubmit()"/> </div> </center> </body> </html>

選中所有或一個復選框以啟用提交按鈕 angularjs

問題描述

2 個解決方案

解決方案1
1 2019-01-30 20:42:33

解決方案2
0 已采納 2019-01-30 20:58:08

選中所有或一個復選框以啟用提交按鈕 angularjs

問題描述

2 個解決方案

解決方案1 1 2019-01-30 20:42:33

解決方案2 0 已采納 2019-01-30 20:58:08

解決方案1
1 2019-01-30 20:42:33

解決方案2
0 已采納 2019-01-30 20:58:08