Question

最初按钮的值是禁用的，因为按钮的值为true，因此按钮被禁用。现在选中该复选框后，该按钮应该能够单击。但它无法点击：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a
    <input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s
    <input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d
    <input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f
    <input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g
    <input type="submit" ng-disabled='!formData.week.length' ng-click=a(formData)>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.a = function(x) {
        console.log(x);
        a = [1, 2, 3];
        console.log(a);
      }
    });
  </script>

</body>

</html>

Answer 1

您的ng-disabled始终检查长度。但实际上，您需要检查复选框的布尔值，以满足您尝试实现的方案。

我已将您的代码更新为以下代码

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<input type="checkbox" ng-model="formData.week[0]"  ng-true-value="'a'">a
<input type="checkbox" ng-model="formData.week[1]"  ng-true-value="'s'">s
<input type="checkbox" ng-model="formData.week[2]"  ng-true-value="'d'">d
<input type="checkbox" ng-model="formData.week[3]"  ng-true-value="'f'">f

<input type="checkbox" ng-model="formData.week[4]"  ng-true-value="'g'">g


<input type="submit" ng-disabled='formData.week[0]==false &&

formData.week[1]==false &&
formData.week[2]==false &&
formData.week[3]==false &&
formData.week[4]==false



' ng-click=a(formData)>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.formData = {}
$scope.formData.week = []
$scope.formData.week[0]=false;
$scope.formData.week[1]=false;
$scope.formData.week[2]=false;
$scope.formData.week[3]=false;
$scope.formData.week[4]=false;


   });
</script>

</body>
</html>

Answer 2

更改ng-disabled='!formData.week.length'

到

ng-disabled='!(!!formData.week[0] || !!formData.week[1] || !!formData.week[2] || !!formData.week[3] || !!formData.week[4])'

查看工作示例：https://plnkr.co/edit/JOARO1NwgunCw5Zcyvpo?p=preview

Answer 3

实际上有一些事情要理解

 <div ng-app="myApp" ng-controller="myCtrl">

  <input type="checkbox" ng-model="formData.week[0]"  ng-true-value="'a'">a
  <input type="checkbox" ng-model="formData.week[1]"  ng-true-value="'s'">s
  <input type="checkbox" ng-model="formData.week[2]"  ng-true-value="'d'">d
  <input type="checkbox" ng-model="formData.week[3]"  ng-true-value="'f'">f
  <input type="checkbox" ng-model="formData.week[4]"  ng-true-value="'g'">g
  <input type="submit" ng-disabled='!formData.week.length' ng-click=a(formData)>
</div>

因此，当您将NgModel应用为formData.week[0]时，它将形成范围变量formData类似

{
  "week" :{"0":true,"1" : true", "2" : "false"
}

因为您没有将formData.week声明为数组。因此，要对此对象进行长度检查，您需要创建类似

的函数

<input type="submit" ng-disabled='!checkLength()' ng-click=a(formData)>

该功能看起来像

$scope.checkLength = function(){
  if($scope.formData && $scope.formData.week && Object.keys($scope.formData.week).length > 0)
    return true;
  else 
    return false;
}

此外，如果您希望仅在任何复选框为真时启用该按钮。那么你可以修改功能

$scope.checkLength = function(){
 if($scope.formData && $scope.formData.week && Object.keys($scope.formData.week).length > 0) {
   var point = 0;
   for(var i=0;i< Object.keys($scope.formData.week).length;i++){
       if($scope.formData.week[i] == true){
         point++; 
         break;
       }
   }
   if(point>0) return true;
   else return false;
 }
 else 
   return false;
 }

使用ng-disabled时，禁用按钮不起作用

3 个答案: