單擊事件后禁用按鈕
[英]Disabling a button after a click event
問題描述
我有這段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>
還有這段JavaScript代碼。
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();
}
};
};
單擊一次后，我想禁用完成按鈕。 我已經嘗試過類似的方法，但是在javascript文件中仍然無法使用，請使用標記
self.isFinished = 0;
然后在完成功能中將其設置為1
self.isFinished = 1
然后在代碼的html部分中使用ng-disabled
ng-disabled = "controller.wizard.isFinished == 1"
有人可以找出問題所在嗎？
謝謝
5 個解決方案
解決方案1
0 2016-12-15 13:50:00
嘗試做self.wizadr.isFinished = 1; 而不是self.isFinished = 1;
解決方案2
0 2016-12-15 14:01:31
您不能禁用標簽。 在按鈕上使用ng-disabled。 同時在主體上添加ng-app指令
解決方案3
0 2016-12-21 06:25:04
確實，禁用標簽沒有任何意義，因此我決定使用此功能從所有標簽中刪除所有鏈接。
在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();
}
現在可以正常工作，並且可以防止多次提交。 我刪除了javascript文件中的所有isFinished標志以及html中的ng-disabled。
解決方案4
0 2016-12-21 06:43:24
由於錨標記沒有禁用屬性，因此您可以為此使用自定義代碼。 我用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>
祝你好運:)
解決方案5
0 2016-12-21 07:22:49
ng-disabled不能用於a標簽。 你可以用這個
HTML
<a ng-click="disabled()" class="btn" ng-class="{'disabled':disable}">Click Me</a>
JS
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; }
您可以通過在第一次單擊后使用此代碼來防止單擊事件。
供參考，請點擊此鏈接
希望對您有用。
單擊后未禁用按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.