Question

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

我尝试使用JavaScript和jQuery，但它无法正常工作。该按钮被禁用但表单未提交。

jQuery的：

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

JavaScript的：

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

这两种方法都很有效，但现在表单不会提交。

Answer 1

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

示例：

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

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

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

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

Answer 2

如果在用户点击按钮后立即设置disabled =“disabled”，并且表单因此没有提交，您可以尝试两件事：

//First choice [given myForm = your form]:
myInputButton.disabled = "disabled";
myForm.submit()

//Second choice:
setTimeout(disableFunction, 1);  
//so the form will submit and then almost instantly, the button will be disabled

虽然我老实说打赌会有更好的方法来做到这一点。

Answer 3

jQuery .one()不应与点击事件一起使用，而应与submit事件一起使用，如下所述。

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

Answer 4

$("selectorbyclassorbyIDorbyName").click(function () {
  $("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});

选择按钮及其ID或文本或类...它只是在第一次点击后禁用，并在20 Milli秒后启用

非常适合发布帖子并将其放置在母版页面中，适用于所有按钮而不会隐式调用onclientClick

Answer 5

使用现代Js事件，“一次”！

const button = document.getElementById(btnId);
button.addEventListener("click", function() {
    // Submit form
}, {once : true});

// Disabling works too, but this is a more standard approach for general one-time events

Documentation，CanIUse

Answer 6

protected void Page_Load(object sender, EventArgs e)
    {
        // prevent user from making operation twice
        btnSave.Attributes.Add("onclick", 
                               "this.disabled=true;" + GetPostBackEventReference(btnSave).ToString() + ";");

        // ... etc. 
    }

Answer 7

要在MVC NET Core中提交表单，可以使用 INPUT 提交：

<input type="submit" value="Add This Form">

要使其成为按钮，例如，我正在使用Bootstrap：

<input type="submit" value="Add This Form" class="btn btn-primary">

要防止在MVC NET Core中发送重复的表单，可以添加 onclick 事件，并使用 this.disabled = true; 禁用按钮：

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.disabled = true;">

如果要先检查表单是否有效，然后禁用该按钮，请首先添加 this.form.submit（）; ，因此，如果表单有效，则将禁用此按钮，否则按钮仍将启用，以便您在验证后更正表单。

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true;">

您可以使用 this.value ='text'; ：

将文本添加到已禁用的按钮，表示您正在发送表单，此时所有验证均正确无误。

<input type="submit" value="Add This Form" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true; this.value = 'Submitting the form';">

Answer 8

想简单

test

如果你想运行一次：）

Answer 9

要禁用提交按钮，只需在提交按钮中添加禁用属性即可。

$("#btnSubmit").attr("disabled", true);

要启用已禁用的按钮，请将disabled属性设置为false，或删除已禁用的属性。

$('#btnSubmit').attr("disabled", false);

或

$('#btnSubmit').removeAttr("disabled");

单击后禁用该按钮

9 个答案:

使用现代Js事件，“一次”！