禁用其他按钮时隐藏按钮事件

时间:2017-12-26 13:02:35

标签: javascript jquery html css angularjs

我希望jQuery或javascript中的事件或CSS中的某些事物可以隐藏按钮(" A"按钮)当其他按钮(" B"按钮)(不在表单中) )被禁用和对方。显示" A"按钮当" B"按钮已启用。

" B"按钮的代码为angular,但我无法访问$scope

<div ng-if="something" class="steps-pager ng-scope">
    <!-- More stuff -->
    <a href="" ng-click="goTo()" class="next" title="next step" tabindex="0" ng-class="{hidden:disableButton}">next</a>
</div>

我在正面工作(使用分析测试软件)并且我不知道所有必须触发的元素是什么&#34; B&#34;按钮启用或禁用状态。它可以是点击,也可以是验证和其他东西。

我尝试在更改事件上测试它,但它们仅适用于输入元素。我试图获得$ scope,但它得到了保护。我无法访问$ Scope。间隔可能是有效的,但对于这个网站来说,在一个巨大过程的每个步骤中都有一个间隔。

1 个答案:

答案 0 :(得分:1)

您可以在AngularJs中使用ng-hideng-disabled来实现上述方案。

通过将scope对象设置为true,您始终可以动态地为ng-disabled值分配其他表单验证结果。

以下是工作DEMO

&#13;
&#13;
(function(angular) {
  'use strict';
  angular.module('app', [])
    .controller('Ctrl', ['$scope', function($scope) {

      $scope.disableA = false;
      $scope.disableB = false;
      $scope.disable = function() {
       
        $scope.disableB = $scope.disableA ? false:true;
      };
    }]);
})(window.angular);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="Ctrl">

    <button ng-click="" ng-hide="disableB" ng-disabled="disableA">Button A</button>

    <button ng-click="" ng-hide="disableA" ng-disabled="disableB">Button B</button>

    <button ng-click="disable()" ng-hide="">Disable B</button>

  </div>
</body>
&#13;
&#13;
&#13;