Отключение кнопки после того, как событие щелчка

У меня есть этот кусок HTML кодаОтключение кнопки после того, как событие щелчка

<html> 
<head></head> 
<body> 
<div ng-init="controller.onInit()" style="divContainer"> 
    <div class="divLoading" style="vertical-align:middle" ng-show="controller.noOfLoadingInProgress > 0"> 
     <span class="text"> Loading ...</span> <img src="../../Styles/Images/loading.gif" /> 
    </div> 
    <br /> 
    <h1> 
     Test</h1> 
    <div ui-view="wizardContent"> 
    </div> 
    <!--<div class="clear"> 
    </div>--> 
    <div> 
     <a class="buttonprev" id="btnPrevious" href="#" ng-show="controller.wizard.wizardIndex > 1" 
      ng-click="controller.wizard.previous()"><span>Previous </span></a> 
      <a class="buttonCancel" 
       id="btnCancel" href="#" ng-click="controller.wizard.cancel()"><span>Cancel </span> 
      </a> 
      <a class="buttonnext" id="btnNext" ng-disabled="controller.wizard.isNextInProgress" 
       href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted && (controller.wizard.wizardIndex < controller.wizard.wizardItems.length-1)" 
       ng-click="controller.wizard.next()"><span>Next</span> </a> 
      <a class="buttonnext" id="btnFinish" href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted && (controller.wizard.wizardIndex == controller.wizard.wizardItems.length-1)" 
        ng-click="controller.wizard.finish()" ng-disabled ="controller.wizard.isFinished == 1"><span>Finish</span> </a> 
    </div> 
</div> 
</body> 
</html>

И этот кусок яваскрипта кода.

var WizardItem = function (manager, uiState) { 
    this.manager = manager; 
    this.uiState = uiState; 
} 

var Wizard = function ($state, onFinishCallback, wizardItems) { 
    var self = this; 

    self.onFinishCallback = onFinishCallback; 
    self.wizardItems = wizardItems; 
    self.wizardIndex = 0; 
    self.isNextInProgress = false; 
    self.isFinished = 0; 

    self.refresh = function() { 
     $state.go(wizardItems[self.wizardIndex].uiState); 
    }; 
    self.next = function() { 
     if ((self.wizardIndex < wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) { 
      if (wizardItems[self.wizardIndex].manager.overrideNext == null) { 
       self.wizardIndex++; 
       $state.go(wizardItems[self.wizardIndex].uiState); 
      } 
      else { 
       self.isNextInProgress = true; 
       wizardItems[self.wizardIndex].manager.overrideNext(onFinishCallBack); 
      } 
     } 

     function onFinishCallBack(success) { 
      self.isNextInProgress = false; 
      if (success) { 
       self.wizardIndex++; 
       $state.go(wizardItems[self.wizardIndex].uiState); 
       self.isFinished = 1; 
      } 
     } 
    } 

    self.refreshWizardFrom = function (newWizardItems) { 
     self.wizardItems.splice(0); 
     for (var c = 0; c < newWizardItems.length; c++) { 
      self.wizardItems.push(newWizardItems[c]); 
     } 
    } 

    self.previous = function() { 
     if (self.wizardIndex > 1) { 
      self.wizardIndex--; 
      console.log($state.go(wizardItems[self.wizardIndex].uiState)); 
      $state.go(wizardItems[self.wizardIndex].uiState); 
     } 
    }; 
    self.cancel = function() { 
     if (confirm('Are you sure you want to cancel!')) { 
      $state.go('Home'); 
     } 
    }; 
    self.finish = function() { 
     self.isFinished = 1; 
     if ((self.wizardIndex == wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) { 
      //Ajmal Bug 410 - Variable flag isFinished set to 1 and being called on finish button click to disable it 
      self.isFinished = 1; 
      self.onFinishCallback(); 
      self.isFinished = 1; 
      // alert('finish'); 
     } 
    }; 

    self.validateCurrentWizardItem = function() { 
     return wizardItems[self.wizardIndex].manager.validate(); 
    }; 

    self.initAllWizardItems = function() { 
     for (var c = 0; c < wizardItems.length; c++) { 
      wizardItems[c].manager.onInit(); 
     } 
    } 

    self.registerValidations = function() { 
     for (var c = 0; c < wizardItems.length; c++) { 
      wizardItems[c].manager.registerValidations(); 
     } 
    }; 

};

Я бы хотел отключить кнопку завершения после щелчка по ней один раз. Я пытался что-то подобное, но он по-прежнему не работает в яваскрипта файле, используйте флаг

self.isFinished = 0;

затем установите его в 1 в функции финишной

self.isFinished = 1

затем использовать нг-инвалидов в HTML части кода

ng-disabled = "controller.wizard.isFinished == 1"

Может кто-нибудь выяснить, где может быть проблема?

Благодаря

источник

2016-12-15 TropicalViking

Пожалуйста, используйте свойство ng-disabled на кнопке вместо тега привязки, поскольку для гиперссылок нет атрибута disabled. Может быть, это поможет вам. Спасибо –

Try делать self.wizadr.isFinished = 1; вместо self.isFinished = 1;

источник

2016-12-15 13:50:00

спасибо за предложение, попробовал, но он все еще не работает. – TropicalViking

Вы не можете отключить тег. Используйте кнопку ng-disabled на кнопке. Также добавьте директиву ng-app на теле

источник

2016-12-15 14:01:31 Melzar

Другие директивы ng, которые находятся выше, используются в том же контексте, работают как и планировалось. – TropicalViking

Нет атрибута disabled для тега , ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a также относительно темы - где находится ** ng-app ** tag? Я вижу, что вы используете ui-router, вы указали контроллер и свойство controllerAs? – Melzar

Действительно, отключение тега не имеет никакого смысла, поэтому я решил удалить все ссылки из всех тегов с помощью этой функции.

В функции self.finish, добавил вызов функции (выделено жирным шрифтом)

self.finish = function() { 
     if ((self.wizardIndex == wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) { 
      self.onFinishCallback(); 

      ConvertAnchorToSpan(); 
      // alert('finish'); 
     } 
    };

Вне мастера, использовал эту функцию в том же файла JavaScript.

function ConvertAnchorToSpan() { 
    var $link = $('a'); 
    var $span = $('<span>'); 
    $link.after($span.html($link.html())).remove(); 
}

Теперь он работает и предотвращает несколько представлений. Я удалил все флаги isFinished в файле javascript, а также ng-disabled в html.

источник

2016-12-21 06:25:04 TropicalViking

Поскольку для метки привязки нет отключенного свойства, вы можете использовать для этого специальный код. Я использовал ng-class вместо ng-disabled Он добавит класс в ваш якорный тег и в css-коде будет написан для того, чтобы эти элементы класса были отключены.

<style> 
    .disabledOn { 
    cursor: not-allowed; 
    pointer-events: none; 
    color: grey; 
    } 
</style>

HTML

<a class="buttonnext" id="btnFinish" href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted && (controller.wizard.wizardIndex == controller.wizard.wizardItems.length-1)" 
       ng-click="controller.wizard.finish()" ng-class="{disabledOn : controller.wizard.isFinished == 1}"><span>Finish</span> </a>

удачи :)

источник

2016-12-21 06:43:24

ng-disabled не может быть использована для a тега.Вы можете использовать этот

HTML

<a ng-click="disabled()" class="btn" ng-class="{'disabled':disable}">Click Me</a>

app.controller('MainCtrl', function($scope) { 
    var count=0; 
    $scope.disable=false; 
    $scope.disabled = function() { 
    if(count>0) { return false;}else{ 
    alert("do someting else"); 
    $scope.disable=true; 
    count++; 
    } 
} 
});

CSS

.disabled { cursor: default; opacity: .5; }

Вы можете предотвратить щелчок событие, используя этот код после первого щелчка.

Для справки нажмите эту link

Надеется, что это будет полезно для вас.

источник

2016-12-21 07:22:49

Отключение кнопки после того, как событие щелчка

ответ

Смежные вопросы