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

时间:2015-11-07 20:34:30

标签: javascript jquery angularjs model-view-controller input

我得到了以下角度模板:

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

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

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

3 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:1)

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

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

请查看下面的演示或fiddle

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

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