如果沒有複選框被選中

如何禁用按鈕，我得到了以下的角模板：如果沒有複選框被選中

<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

如果沒有複選框被選中

回答

相關問題