如何基於複選框啓用/禁用提交按鈕？

-1

我想啓用提交按鈕，當一個或多個複選框的值被選中時，我試着用下面的代碼啓用它的按鈕，但如果我檢查一個值，使所有複選框分離？任何想法是什麼實施錯誤？如何基於複選框啓用/禁用提交按鈕？

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); 
    };

來源

2016-12-27 hussain

是的，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

來源

2016-12-27 22:03:21 jbrown

謝謝你幫我解決了這個問題。 – 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>

來源

2016-12-27 21:42:30

如何基於複選框啓用/禁用提交按鈕？

回答

相關問題