如果没有选中复选框，如何禁用按钮

Question

我得到了以下角度模板：

<tr ng-repeat="user in users">
    <td><input type="checkbox"></td>
    <td>{{user.username}}</td>
    <td>{{user.apiKey}}</td>
    <td>{{user.apiSecret}}</td>
</tr>
...
<button type="button" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>

如果没有选中复选框，我如何禁用按钮，但只要选中表格中的一个或多个复选框就启用它？

我如何确定检查了哪个表条目并访问用户数据？

Answer 1

Angular 的方式是使用ng-disabled。作为一个例子，你可以使用这个：

ng-disabled="!checked"

！意味着做相反的事情，所以 !true == false = true

完整示例：

<td>
   <input type="checkbox" ng-model="checked"
</td> 

<button class="btn btn-danger" ng-disabled="!checked"><i class="fa fa-trash-o"></i>Submit</button>

在此处阅读有关 ng-disabled 的更多信息：

https://docs.angularjs.org/api/ng/directive/ngDisabled

什么是HTML属性checked？

选中的属性是一个布尔属性。

当存在时，它指定一个元素应该是 页面加载时预选（选中）。

checked 属性可以和 and 一起使用 <input type="radio">.

CODEPEN DEMO

Answer 2

您可以将checked 状态添加到用户，并在每次复选框更改时检查是否仍有一个用户被选中。

可以使用angular.forEach、for 循环或 underscore.js（如果您想使用它）来完成检查。 在该循环期间，您还可以创建已检查用户的数组。

请查看下方或fiddle 中的演示。

angular.module('demoApp', [])
    .controller('MainController', MainController);

function MainController($scope) {
    $scope.users = [{
        username: 'John',
        apiKey: '1234',
        apiSecret: '2345'
    }, {
        username: 'Jane',
        apiKey: '234',
        apiSecret: '24'
    }];
    $scope.checkedUsers = [];
    
    $scope.checkButtonState = function() {
    	/* with underscore.js
        $scope.checkedUsers = _.where($scope.users, {check: true});
        $scope.enableButton = _.chain($scope.checkedUsers)
            .pluck('check').some().value();
        */
        $scope.checkedUsers = [];
        angular.forEach($scope.users, function(user) {
        	if ( user.check ) {
                $scope.checkedUsers.push(user);
            }
        });
        
        $scope.enableButton = $scope.checkedUsers.length > 0;
    };
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController">
    <table>
        <tr ng-repeat="user in users">
            <td>
                <input 
                       ng-model="user.check"
                       ng-change="checkButtonState()"
                       type="checkbox">
            </td>
            <td>{{user.username}}</td>
            <td>{{user.apiKey}}</td>
            <td>{{user.apiSecret}}</td>
        </tr>
    </table>
        
    <button type="button" class="btn btn-danger"  ng-disabled="!enableButton"><i class="fa fa-trash-o"></i>
    </button>
        {{checkedUsers}}
</div>

Answer 3

在非 angularJS 示例中（与@GothBurz 的答案相比，后者更优雅但不太直观）：

jQuery:

$("input:checkbox").change(function() {     // every time a checkbox changes
    $("button").attr("disabled", "true");   // start button disabled
    $("input:checkbox:checked").each(function() {
        $("button").removeAttr("disabled"); // if any checkbox checked, make button enabled
    });
});

查看工作示例on JSFiddle.net。

或者，对于更长的非 jQuery 示例，请参阅 this fiddle。