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属性是布尔属性。

如果存在，则指定元素应该是   页面加载时预先选中（选中）。

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

CODEPEN DEMO

Answer 2

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

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

请查看下面的演示或fiddle。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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。

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

3 个答案: