这个问题是两个部分。我试图在这里做两件事取决于用户的行为。 如果按钮类型列表中存在多个地址，我有一个显示送货地址的页面。如果有多个地址，则会出现多个按钮。用户还可以输入新地址。这是来自NopCommerce结帐。
我想做的是，如果用户通过单击按钮选择要使用的特定地址，然后获取该发货信息并禁用按钮单击，执行验证，然后允许点击继续，如果没问题。
但是，如果用户输入新地址，我想禁用底部的“提交”按钮，验证信息，如果一切正常，请继续执行步骤。这是现在更重要的部分。
有人可以帮助您停用此表单底部的提交按钮吗？我尝试了几种方法，但无法得到它。
以下是表单数据：
<div class="page-title">
<h1>Shipping address</h1>
</div>
<div class="page-body checkout-data">
<div class="section select-shipping-address">
<div class="title">
<strong>Select shipping address</strong>
</div>
<div class="address-grid">
<div class="address-item">
<div class="select-button">
<input type="button" value="Ship to this address" class="button-1 select-shipping-address-button" onclick="setLocation('/checkout/selectshippingaddress?addressId=43') " />
</div>
<ul class="address-box">
<li class="name">
<strong>John Smith</strong>
</li>
<li class="email">Email: admin@yourstore.com</li>
<li class="phone">
Phone number:
1234567890
</li>
<li class="fax">
Fax number:
</li>
<li class="address1">
320 E 2nd St
</li>
<li class="address2">
</li>
<li class="city-state-zip">
New York ,
New York 10022-6708
</li>
<li class="country">
United States
</li>
</ul>
</div>
<div class="address-item">
<div class="select-button">
<input type="button" value="Ship to this address" class="button-1 select-shipping-address-button" onclick="setLocation('/checkout/selectshippingaddress?addressId=74') " />
</div>
<ul class="address-box">
<li class="name">
<strong>John Smith</strong>
</li>
<li class="email">Email: admin@yourstore.com</li>
<li class="phone">
Phone number:
123457890
</li>
<li class="fax">
Fax number:
</li>
<li class="address1">
42 Deacon Lane
</li>
<li class="city-state-zip">
New Hampshire,
New Hampshire 02548
</li>
<li class="country">
United States
</li>
</ul>
</div>
</div>
</div>
<div class="section new-shipping-address">
<div class="title">
<strong>Or enter new address</strong>
</div>
<div class="enter-address">
<form action="/checkout/shippingaddress" method="post">
<div class="enter-address-body">
<script type="text/javascript">
$(function () {
$("#NewAddress_CountryId").change(function () {
var selectedItem = $(this).val();
var ddlStates = $("#NewAddress_StateProvinceId");
var statesProgress = $("#states-loading-progress");
statesProgress.show();
$.ajax({
cache: false,
type: "GET",
url: "/country/getstatesbycountryid",
data: { "countryId": selectedItem, "addEmptyStateIfRequired": "true" },
success: function (data) {
ddlStates.html('');
$.each(data, function (id, option) {
ddlStates.append($('<option></option>').val(option.id).html(option.name));
});
statesProgress.hide();
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to retrieve states.');
statesProgress.hide();
}
});
});
});
</script>
<input data-val="true" data-val-number="The field Id must be a number." data-val-required="'Id' must not be empty." id="NewAddress_Id" name="NewAddress.Id" type="hidden" value="0" />
<div class="edit-address">
<div class="inputs">
<label for="NewAddress_FirstName">First name:</label>
<input class="text-box single-line" data-val="true" data-val-required="First name is required." id="NewAddress_FirstName" name="NewAddress.FirstName" type="text" value="John" />
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="NewAddress.FirstName" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_LastName">Last name:</label>
<input class="text-box single-line" data-val="true" data-val-required="Last name is required." id="NewAddress_LastName" name="NewAddress.LastName" type="text" value="Smith" />
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="NewAddress.LastName" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_Email">Email:</label>
<input class="text-box single-line" data-val="true" data-val-email="Wrong email" data-val-required="Email is required." id="NewAddress_Email" name="NewAddress.Email" type="text" value="admin@mariobadescu.com" />
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="NewAddress.Email" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_Company">Company:</label>
<input class="text-box single-line" id="NewAddress_Company" name="NewAddress.Company" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="NewAddress.Company" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_CountryId">Country:</label>
<select data-val="true" data-val-number="The field Country must be a number." data-val-required="Country is required." id="NewAddress_CountryId" name="NewAddress.CountryId">
<option value="0">Select country</option>
<option value="1">United States</option>
<option value="2">Canada</option>
</select>
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="NewAddress.CountryId" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_StateProvinceId">State / province:</label>
<select data-val="true" data-val-number="The field State / province must be a number." id="NewAddress_StateProvinceId" name="NewAddress.StateProvinceId">
<option value="0">Other (Non US)</option>
</select>
<span id="states-loading-progress" style="display: none;" class="please-wait">Wait...</span>
<span class="field-validation-valid" data-valmsg-for="NewAddress.StateProvinceId" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_City">City:</label>
<input class="text-box single-line" data-val="true" data-val-required="City is required" id="NewAddress_City" name="NewAddress.City" type="text" value="" />
<span class="required">*</span> <span class="field-validation-valid" data-valmsg-for="NewAddress.City" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_Address1">Address 1:</label>
<input class="text-box single-line" data-val="true" data-val-required="Street address is required" id="NewAddress_Address1" name="NewAddress.Address1" type="text" value="" />
<span class="required">*</span> <span class="field-validation-valid" data-valmsg-for="NewAddress.Address1" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_Address2">Address 2:</label>
<input class="text-box single-line" id="NewAddress_Address2" name="NewAddress.Address2" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="NewAddress.Address2" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_ZipPostalCode">Zip / postal code:</label>
<input class="text-box single-line" data-val="true" data-val-required="Zip / postal code is required" id="NewAddress_ZipPostalCode" name="NewAddress.ZipPostalCode" type="text" value="" />
<span class="required">*</span> <span class="field-validation-valid" data-valmsg-for="NewAddress.ZipPostalCode" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_PhoneNumber">Phone number:</label>
<input class="text-box single-line" data-val="true" data-val-required="Phone is required" id="NewAddress_PhoneNumber" name="NewAddress.PhoneNumber" type="text" value="" />
<span class="required">*</span> <span class="field-validation-valid" data-valmsg-for="NewAddress.PhoneNumber" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="NewAddress_FaxNumber">Fax number:</label>
<input class="text-box single-line" id="NewAddress_FaxNumber" name="NewAddress.FaxNumber" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="NewAddress.FaxNumber" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="buttons">
<input type="submit" name="nextstep" value="Next" class="button-1 new-address-next-step-button" />
</div>
</form>
</div>
我有以下代码，但没有：
$(".new-shipping-address > .enter-address > .enter-address-body > .edit-address > .new-address-next-step-button")[0].onclick = null;
$(".new-shipping-address > .enter-address > .enter-address-body > .edit-address > .new-address-next-step-button").click(function () {
alert("here");
$(":submit").closest("form").submit(function () {
$(':submit').attr('disabled', 'disabled');
});
var selectedShippingAddressId = $('#shipping-address-select').val();
var url = '/WidgetsAddressVerification/PublicInfo/' + selectedShippingAddressId;
var urlNewAddress = '/WidgetsAddressVerification/ValidateNewAddress/';
if (selectedShippingAddressId == "") {
//alert($('#ShippingNewAddress_Id').val());
$.ajax({
type: 'post',
url: urlNewAddress,
data: {
FirstName: $('#NewAddress_FirstName').val(),
LastName: $('#NewAddress_LastName').val(),
CompanyName: $('#NewAddress_Company').val(),
EmailAddress: $('#NewAddress_Email').val(),
CompanyName: $('#NewAddress_Company').val(),
CountryId: $('#NewAddress_CountryId').val(),
StateProvinceId: $('#NewAddress_StateProvinceId').val(),
City: $('#NewAddress_City').val(),
Address1: $('#NewAddress_Address1').val(),
Address2: $('#NewAddress_Address2').val(),
PostalCode: $('#NewAddress_ZipPostalCode').val(),
PhoneNumber: $('#NewAddress_PhoneNumber').val()
},
success: function (data) {
$("#dialog-modal").html(data);
$("#dialog-modal").dialog({
autoOpen: true,
title: 'Address Verification',
height: 360,
width: 500,
modal: true
});
}
});
}
else {
$.ajax({
type: 'post',
url: url,
success: function (data) {
$("#dialog-modal").html(data);
$("#dialog-modal").dialog({
autoOpen: true,
title: 'Address Verification',
height: 360,
width: 500,
modal: true
});
}
});
}
if (e.preventDefault) {
// For modern browsers
e.preventDefault();
}
else {
// For older IE browsers
e.returnValue = false;
}
});
答案 0 :(得分：0)
不确定问题究竟是什么。你问题的核心部分很简单。要禁用按钮，只需向其添加disabled属性即可。使用jQuery：
$('#myButton').prop('disabled', true);
现在，如果您的问题与如何知道何时应该被禁用有关，那么这就是你的全部。基本上，您只需要绑定到您确定的一个或多个字段上的更改事件是确定的：即，如果用户填写此字段，则应禁用该按钮。然后，在这些情况下禁用该按钮。
您可能还想使用像Knockout这样的框架进行调查。通过将字段绑定为可观察对象，您可以立即收到有关更改的通知，并根据当前状态在页面上进行操作。例如，您可以使用数据绑定，如：
<button type="submit" data-bind="attr: { disabled: SubmitDisabled }">Submit</button>
假设SubmitDisabled是可观的，则会自动禁用或启用提交按钮，具体取决于在任何给定时刻它是返回true还是false。
答案 1 :(得分：0)
这应禁用按钮：
$( '.new-address-next-step-button' ).prop( 'disabled', true );