只有一次单击按钮禁用使用 javascript答案

【问题标题】：Only Once click Button Disabling using javascript只有一次单击按钮禁用使用 javascript
【发布时间】：2015-12-04 23:19:14
【问题描述】：

我需要在单击按钮后禁用它，这样用户就不能多次单击它。（我的应用程序是用 MVC ASP.NET 编写的，我是在普通的 ASP.NET 应用程序中完成的。）

我尝试使用 JavaScript 和 jQuery，但它不起作用。该按钮被禁用，但未提交表单。

jQuery:

$("#ClickMe").attr("disabled", "disabled");

JavaScript：

function DisableNextButton(btnId) {
    document.getElementById(btnId).disabled = 'true';
}

这两种方法都很好用，但现在表单无法提交。

【问题讨论】：

你把这段代码放在哪里了
禁用按钮与表单提交无关。但如果禁用按钮用于提交表单。肯定提交是行不通的

标签： javascript jquery

【解决方案1】：

var button = $('<button>Click Me</button>');

button.clicked = false;

$('body').append(button);

button.click(function(){
  
  if(button.clicked) return;
  button.clicked = true;
  button.prop('disabled', true);
  
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

jQuery 现在有 .one() 函数，可以将任何给定事件（例如“提交”）限制为一次

例子：

$('#myForm').one('submit', function() {
    $(this).find('input[type="submit"]').attr('disabled','disabled');
});

此代码将让您提交一次表单，然后禁用该按钮。将 find() 函数中的选择器更改为您想要禁用的任何按钮。

注意： Per Francisco Goldenstein，我已将选择器更改为要提交的表单和事件类型。这允许您从任何地方（按钮以外的地方）提交表单，同时仍然禁用提交时的按钮。

注意 2： 根据 gorelog，使用 attr('disabled','disabled') 将阻止您的表单发送提交按钮的值。如果要传递按钮值，请改用attr('onclick','this.style.opacity = "0.6"; return false;')。

DEMO page

【讨论】：