所以我有一个剃刀表，我想在ajax请求期间禁用一个按钮。 我也想只向控制器发送一个请求-（禁用任何洪泛尝试）
这是我的html：
<div class="row">
<div class="col-md-8 col-md-offset-2">
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "contactForm" }))
{
<div class="clearfix">
<div class="cf-left-col">
<div class="form-group required">
@Html.TextBoxFor(m => m.CheckInCheckOutDate, new { @class = "form-control input-md round", @required = "required", @autocomplete = "off", @id = "input-id", @placeholder = Resources.Resources.CheckInCheckOutPlaceholderKey })
<div>
@Html.ValidationMessageFor(m => m.CheckInCheckOutDate, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group required">
@Html.TextBoxFor(m => m.Name, new { @class = "form-control input-md round", @required = "required", @placeholder = "Name" })
<div>
@Html.ValidationMessageFor(m => m.Name, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group required">
@Html.TextBoxFor(m => m.MobilePhone, new { @class = "form-control input-md round mobile", @required = "required", @placeholder = "Mobile phone" })
<div>
@Html.ValidationMessageFor(m => m.MobilePhone, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group required">
@Html.TextBoxFor(m => m.EMail, new { @class = "form-control input-md round", @required = "required", @placeholder = "E-Mail" })
<div>
@Html.ValidationMessageFor(m => m.EMail, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group required">
@Html.TextBoxFor(m => m.AdultsNumber, new { @class = "form-control input-md round person", @required = "required", @placeholder = "Guests" })
<div>
@Html.ValidationMessageFor(m => m.AdultsNumber, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group required">
@Html.TextBoxFor(m => m.ChildrenNumber, new { @class = "form-control input-md round person", @placeholder = "Children" })
</div>
</div>
<div class="cf-right-col">
<div class="form-group required">
@Html.TextAreaFor(m => m.MessageBody, new { @class = "form-control input-md round", @rows = 10, @placeholder = "Message" })
<div>
@Html.ValidationMessageFor(m => m.MessageBody, null, new { @class = "text-danger" })
</div>
</div>
@*localhost*@
@*<div class="g-recaptcha" data-sitekey="6LdKaUAUAAAAAMi2MkpRBxJYnmqWJmnJmF22RsRF1"></div>*@
</div>
</div>
@Html.HiddenFor(m => m.MobilePrefixCountry)
@Html.HiddenFor(m => m.ApartmentName)
@Html.HiddenFor(m => m.NumberOfNights)
<br />
<div class="align-left pt-10">
<div class="form-group">
<input id="submitBtn" class="btn btn-default" type="submit" value="Send Message" />
</div>
</div>
<div id="successAlert" class="alert alert-success collapse">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Success!</strong> You have successfully send email. Our staff will respond in shortest amount of time.
</div>
<div id="errorAlert" class="alert alert-danger collapse">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Sending failed!</strong> Please fill all neccessery fields and try again.
</div>
}
</div>
</div>
我有这个js：
$("#contactForm").submit(function (e) {
var form = $(this);
$('#submitBtn').attr("disabled", true);
$("#submitBtn").attr("value", 'Sending...');
//$.ajax({
// type: "POST",
// async:false,
// url: "/Home/SendEmail",
// data: form.serialize(), // serializes the form's elements.
// success: function (data) {
// if (data == "True") {
// $('#successAlert').show('fade')
// .delay(9000)
// .fadeOut(function () {
// $(this).remove();
// });
// }
// else if (data == "False") {
// $('#errorAlert').show('fade')
// .delay(6000)
// .fadeOut(function () {
// $(this).remove();
// });
// }
// }
//});
setTimeout(function () {
$('#submitBtn').attr("disabled", false);
$("#submitBtn").attr("value", 'Send Message');
}, 3000);
e.preventDefault();
});
这很好用，但是当我取消注释ajax部分时，我看不到切换按钮禁用/启用的过渡。我已经把async：false设置了。
已更新（仍然无法运行）：
$("#contactForm").submit(function (e) {
var form = $(this);
$('#submitBtn').attr("disabled", true);
$("#submitBtn").attr("value", 'Sending...');
$.ajax({
type: "POST",
async: false,
url: "/Home/SendEmail",
data: form.serialize(), // serializes the form's elements.
success: function (data) {
if (data == "True") {
$('#successAlert').show('fade')
.delay(9000)
.fadeOut(function () {
$(this).remove();
});
}
else if (data == "False") {
$('#errorAlert').show('fade')
.delay(6000)
.fadeOut(function () {
$(this).remove();
});
}
$('#submitBtn').attr("disabled", false);
$("#submitBtn").attr("value", 'Send Message');
},
error: function () {
$('#submitBtn').attr("disabled", false);
$("#submitBtn").attr("value", 'Send Message');
}
});
e.preventDefault();
});
答案 0 :(得分：1)
将async: false更改为async: true并在ajax请求的某些回调中再次启用按钮。只要保持async: false，您就在阻塞主线程，并且在函数返回之前，对GUI元素的更改才会生效。
从false到true的异步是对@ adaptable.services代码的唯一更改。
答案 1 :(得分：0)
将按钮启用代码放在ajax成功内部。 Ajax完成后，这将启用禁用的按钮。
答案 2 :(得分：0)
首先将您的<input type="submit">更改为<button type="submit">Send Message</button>
然后尝试这个。.
<script>
$("#contactForm").submit(function (e) {
e.preventDefault();
var form = $(this);
$('#submitBtn').attr("disabled", true);
$("#submitBtn").html('Sending...');
$.ajax({
type: "POST",
async:false,
url: "/Home/SendEmail",
data: form.serialize(), // serializes the form's elements.
success: function (data) {
if (data == "True") {
$('#submitBtn').prop("disabled", false);
$('#submitBtn').html("Send Message");
$('#successAlert').show('fade')
.delay(9000)
.fadeOut(function () {
$(this).remove();
});
}
else if (data == "False") {
$('#submitBtn').prop("disabled", false);
$('#submitBtn').html("Send Message");
$('#errorAlert').show('fade')
.delay(6000)
.fadeOut(function () {
$(this).remove();
});
}
},
error: function () {
$('#submitBtn').prop("disabled", false);
$('#submitBtn').html("Send Message");
}
});
});
</script>