如果没有复选框被选中

如何禁用按钮，我得到了以下的角模板：如果没有复选框被选中

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

如何禁用按钮，如果没有复选框被选中，但实现它时，表中的一个或多个复选框被选中？

我怎样才能确定哪个表项被检查并访问用户数据？

来源

2015-11-07 Michael Pittino

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

ng-disabled="!checked"

该！意思是做相反的，所以真正的==假=真

完整的例子：

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

什么是HTML属性checked？

checked属性是布尔属性。

如果存在，它指定在加载页面时预先选择（检查）一个元素应为。

检查的属性可以用于和 <input type="radio">。

CODEPEN DEMO

来源

2015-11-07 20:36:42

什么是 “选中” 和它从何而来？ –

查看更新的答案，这是一个HTML属性。 –

这似乎并不适用于我： '' '' 但是当我检查时没有任何反应。 –

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

来源

2015-11-07 20:41:41

但问题中没有标记jQuery;除非jQuery的angular.js自动需要？我没有使用角度，所以我真的不知道。 –

@DavidThomas这可以很容易地转换为纯JS。我会举另一个例子。 –

如何使用整个jQuery函数vs单个角度更优雅的线？ –

您可以将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() { 
 
    \t /* 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) { 
 
     \t 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>

来源

2015-11-07 21:15:49 AWolf

如果没有复选框被选中

回答

相关问题