Question

我有一些复选框和一个按钮。现在，我想要在选中一个或多个复选框时激活按钮。我怎么能在angularjs中做到这一点？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<label><input type="checkbox" name="check"> First</label>
<label><input type="checkbox" name="check"> Second</label>
<label><input type="checkbox" name="check"> Third</label>


<br>
<button type="button" disabled ng-model="$scope.btn">active/deactive</button>

＆＃13;

Answer 1

将ng-model设置为复选框

<label><input type="checkbox" name="check" ng-model="check1"> First</label>
<label><input type="checkbox" name="check" ng-model="check2"> Second</label>
<label><input type="checkbox" name="check" ng-model="check3"> Third</label>

并使用ng-disabled禁用\ enable按钮

<button type="button" ng-disabled="!check1 && !check2 && !check3" ng-model="$scope.btn">active/deactive</button>

Answer 2

您可以使用按钮上的ng-disabled指令有条件地添加禁用属性。

使用在AngularJS中提供双向数据绑定的ng-model指令检查以下示例，其中输入复选框绑定到控制器范围上的各自属性。

注意：如果您要在视图中检查复杂条件，则可以编写一个函数，并在该情况下使用相应的指令在视图中调用它。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.disableButton = disableButton;
    
    function disableButton() {
      if (vm.first || vm.second || vm.third) {
        return false;
      } else {
      	return true;
      }
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <label><input type="checkbox" name="check" ng-model="ctrl.first"> First</label>
    <label><input type="checkbox" name="check" ng-model="ctrl.second"> Second</label>
    <label><input type="checkbox" name="check" ng-model="ctrl.third"> Third</label>
    <br>
    <button type="button" ng-disabled="ctrl.disableButton()">active/deactive</button>
  </div>
</div>

Answer 3

使用ng-model保存复选框的值并在ng-disabled =“！（checkboxValue1 || ch ...）”中使用它们
使用ng-model保存值，并使用复选框ng-requried =“！checkBox2Value＆amp;＆amp;！checkbox3Value”。在复选框周围放置一个表单，并使用ng-disabled =“formName。$ invalid”

检查Angularjs中的一个或多个复选框后，激活按钮

3 个答案: