Javascript 单击一次按钮后禁用该按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2294041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable the button after clicking the button once
提问by batwadi
In my application i need to disable the button once it is clicked so that user should not click more than once. APplication is MVC ASP.NET i have done this in normal asp.net application. I tried below lines of code but its not working
在我的应用程序中，我需要在单击按钮后禁用该按钮，以便用户不应多次单击。应用程序是 MVC ASP.NET 我已经在普通的 asp.net 应用程序中完成了这个。我尝试了下面的代码行，但它不起作用
thanks in Advance
提前致谢
editedHow can i implement this using javascript ?
编辑我如何使用 javascript 实现这个？
回答by Phil Hale
I've found that with IE8 (I'm not sure about other versions of IE) that you cannot submit a form if you disable the button on the click event. So I came up with an alternate solution. Hide the clicked button and put a new disabled button in it's place. Here's the code:
我发现使用 IE8（我不确定其他版本的 IE）如果禁用单击事件上的按钮，则无法提交表单。所以我想出了一个替代解决方案。隐藏单击的按钮并在其位置放置一个新的禁用按钮。这是代码：
$().ready(function() {
$("someButtonSelector").click(function () {
$(this).hide();
$(this).after('<input type="button" disabled="disabled" value="' + $(this).val() + '" />');
return true;
});
});
回答by Shadow Wizard is Ear For You
You can try this:
你可以试试这个：
onclick="if (this.getAttribute('clicked') == '1') { return false; } else { this.setAttribute('clicked', '1'); }"
It will not disable anything, just prevent the click event after being first clicked.
它不会禁用任何东西，只是在第一次点击后阻止点击事件。
回答by Yuriy Faktorovich
<button type="button" onclick="this.disabled = 'disabled';">Click Me!</button>
Although the Button web control renders as a submit:
尽管 Button Web 控件呈现为提交：
<input type="submit" onclick="this.disabled = 'disabled';" value="Submit" />
回答by griegs
@prakash have you used jQuery to disable or even hide the button?
@prakash 您是否使用过 jQuery 来禁用甚至隐藏按钮？
If your button's id is say "btnClickMe" then the following jQuery will do the job.
如果您的按钮的 id 是“btnClickMe”，那么下面的 jQuery 将完成这项工作。
$("#btnClickMe").hide();
You could also set the disbaled attribute using jQuery;
您还可以使用 jQuery 设置 disbaled 属性；
$("#btnClickMe").attr("disabled","disabled");
The one above is untested but should work.
上面的一个未经测试，但应该可以工作。
回答by kristopher gourd
i have found that if you disable or even remove the button or input element it will stop the call back to the server the most simplest way to handle this is a hide() because you are not removing the functionality of the input button/whatever
我发现，如果您禁用或什至删除按钮或输入元素，它将停止对服务器的回调，处理此问题的最简单方法是 hide()，因为您并没有删除输入按钮/任何东西的功能
$('input_selector').click(function () {
$(this).hide(200/whatever);
$(this).before('<p>Waiting for server to respond?!?</p><br/>')
});
since it is a hide the br is to make sure the p tag is on top of it. there may be a better way and i am open to suggestions.
因为它是隐藏的，所以 br 是为了确保 p 标签在它上面。可能有更好的方法，我愿意接受建议。
回答by Alan Piralla
This works fine as well, and it's easy to understand:
这也很好用，而且很容易理解：
var myButton = $('input:submit');
var waitMessage = 'wait please...';
myButton.click(function() {
if (bottone.val() == waitMessage) {
return false;
};
myButton.val(waitMessage);
console.log('iClicked'); // this line is for testing only, it can be removed.
});
回答by SteveCav
Here is one of my buttons that calls an MVC action then disables itself:
这是我调用 MVC 操作然后禁用自身的按钮之一：
<button class="btn blue pull-right" onclick="location.href='@Url.Action("Index", "GetData", new { page = Model.PageNumber + 1, sortOrder = Model.CurrentSort, fromDate = Model.FromDateParam, toDate = Model.ToDateParam, terminatingpoint = Model.TerminationPointParam, SurecallNo = Model.SurecallNoParm, CallerID = Model.CallerIDParm, outcome = Model.OutcomeParm, pagesize = Model.PageSize })';this.disabled = 'disabled'" >Next ></button>
回答by user1548400
var but = 1;
function f() {
if(but == 1) {
alert("Hello World!");
but = 0;
}
}
Hope it helps.
希望能帮助到你。
回答by Paul
This will work:
这将起作用：
OnClientClick="if (this.getAttribute('clicked') == '1') {
return false;
} else {
this.setAttribute('clicked', '1');
}"
