如何基于复选框启用/禁用提交按钮？

问题描述：

我想启用提交按钮，当一个或多个复选框的值被选中时，我试着用下面的代码启用它的按钮，但如果我检查一个值，使所有复选框分离？任何想法是什么实施错误？如何基于复选框启用/禁用提交按钮？

main.html中

<tr ng-repeat="user in userList track by $index"> 
      <td st-ratio="20">{{user.attuid}}</td> 
      <td st-ratio="30">{{user.firstName}} {{user.lastName}}</td> 
      <td st-ratio="20"><input type="checkbox" ng-model="userList.selected" ng-click="checkedValue(user)"> </td> 
     </tr> 

<button class="btn btn-primary" ng-disabled="user.selected" ng-disabled="!userList.selected" ng-click="addUsers()">Add User(s)</button>

Ctrl.js

$scope.$on('show-user-list',function(e,data){ 
    $scope.userList = data; 
    $scope.userList.selected = false; 
    }); 


$scope.checkedValue = function(user) { 
user._id = user.attuid; 
user.type = 'user'; 
     if ($scope.selectedUsers.indexOf(user) === -1) { 
      $scope.selectedUsers.push(user); 
      $scope.userList.selected = true; 
     } else { 
      $scope.selectedUsers.splice($scope.selectedUsers.indexOf(user), 1); 
     } 
     console.log($scope.userList.selected); 
    };

是的，prooblem是'NG-模型= “userList.selected”'我这一点，应该是'ng-model =“user .selected”' –

按钮怎么样？ – hussain

更新了答案，并检查了启用和禁用按钮的方法。 –

答

创建单个作用域变量，以使用ng-disabled进行评估。就像$ scope.userSelected一样。根据用户被选中/未选中进行更新。

控制器

$scope.userSelected = false; 

$scope.checkedValue = function() { 
    $scope.userSelected = false; 
    angular.forEach($scope.userList, function(user) { 
    if (user.selected) { 
     $scope.userSelected = true; 
    } 
    }); 
};

HTML

<table> 
    <tr ng-repeat="user in userList track by $index"> 
    <td st-ratio="20">{{user.attuid}}</td> 
    <td st-ratio="30">{{user.firstName}} {{user.lastName}}</td> 
    <td st-ratio="20"> 
     <input type="checkbox" ng-model="user.selected" ng-click="checkedValue()"> </td> 
    </tr> 
</table> 
<button class="btn btn-primary" ng-disabled="!userSelected" ng-click="addUsers()">Add User(s)</button>

这里的工作plunk

谢谢你帮我解决了这个问题。 – hussain

不客气。 – jbrown

答

的问题是，你该复选框值ng-model="userList.selected"，所以所有的复选框具有相同的价值userList.selected，因此都得到选择时你检查其中一个。

更新 - （处理禁用和启用的adduser按钮）

怎么样，我们有$scope.selectedUsers然后根据其长度禁用按钮ng-disabled="selectedUsers.length == 0"

示例代码段：

angular.module("myApp", []) 
 
    .controller("myCtrl", function($scope) { 
 
    $scope.userList = [{ 
 
     attuid: "1", 
 
     firstName: "abc", 
 
     lastName: "xyz", 
 
     selected: false 
 
    }, { 
 
     attuid: "2", 
 
     firstName: "abc", 
 
     lastName: "xyz", 
 
     selected: false 
 
    }]; 
 
    $scope.selectedUsers = []; 
 
    $scope.checkedValue = function(user) { 
 
     user._id = user.attuid; 
 
     user.type = 'user'; 
 
     if ($scope.selectedUsers.indexOf(user) === -1) { 
 
     $scope.selectedUsers.push(user); 
 
     $scope.userList.selected = true; 
 
     } else { 
 
     $scope.selectedUsers.splice($scope.selectedUsers.indexOf(user), 1); 
 
     } 
 
    }; 
 

 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <table> 
 
    <tr ng-repeat="user in userList"> 
 
     <td st-ratio="20">{{user.attuid}}</td> 
 
     <td st-ratio="30">{{user.firstName}} {{user.lastName}}</td> 
 
     <td st-ratio="20"> 
 
     <input type="checkbox" ng-model="user.selected" ng-click="checkedValue(user)"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <button class="btn btn-primary" ng-disabled="selectedUsers.length == 0" ng-click="addUsers()">Add User(s)</button> 
 
</div>

如何基于复选框启用/禁用提交按钮？

相关推荐