在Angularjs中选中一个或多个复选框后，激活按钮

active button after check one or more checkbox in Angularjs

本文关键字：复选框 按钮 激活 Angularjs 一个      更新时间：2023-09-26

我有一些复选框，和一个按钮。现在，当一个或多个复选框被选中时，我想要激活按钮。如何在angularjs中做到这一点?

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

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

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

检查下面的例子，其中输入复选框使用ng-model指令绑定到控制器作用域中各自的属性，该指令在AngularJS中提供双向数据绑定。

注意:如果你要在视图中检查一个复杂的条件，你可以编写一个函数，并在视图中使用相应的指令来调用它。

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>

  1. 用ng-model保存复选框的值，并在ng-disabled="!(checkboxValue1 || ch…)"

  2. 使用ng-model保存值和ng- required ="! "checkBox2Value,,!checkbox3Value"的复选框。在复选框周围添加一个表单，并使用ng-disabled="formName.$invalid"

相关文章：