使用JQuery禁用“提交”按钮和/或获取表单操作的值

这个问题是两个部分。 我试图在这里做两件事取决于用户的行为。 如果按钮类型列表中存在多个地址，我有一个显示送货地址的页面。 如果有多个地址，则会出现多个按钮。 用户还可以输入新地址。 这是来自NopCommerce结帐。

我想做的是，如果用户通过单击按钮选择要使用的特定地址，然后获取该发货信息并禁用按钮单击，执行validation，然后允许点击继续，如果没问题。

但是，如果用户输入新地址，我想禁用底部的“提交”按钮，validation信息，如果一切正常，请继续执行这些步骤。 这是现在更重要的部分。

有人可以帮助禁用此表单底部的提交按钮吗？ 我尝试了几种方法，但无法得到它。

这是表单数据：

 
Shipping address
 
 
 
 
 Select shipping address 
 
 
 
  
 
 
 John Smith 
 
Email: [e-mail]
 
 Phone number: 1234567890 
 
 Fax number: 
 
 320 E 2nd St 
 
 
 
 New York , New York 10022-6708 
 
 United States 
 
 
 
 
  
 
 
 John Smith 
 
Email: [e-mail]
 
 Phone number: 123457890 
 
 Fax number: 
 
 42 Deacon Lane 
 
 New Hampshire, New Hampshire 02548 
 
 United States 
 
 
 
 
 
 
 Or enter new address 
 
 
 
  $(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($('').val(option.id).html(option.name)); }); statesProgress.hide(); }, error: function (xhr, ajaxOptions, thrownError) { alert('Failed to retrieve states.'); statesProgress.hide(); } }); }); });   
 
 First name:  *  
 
 Last name:  *  
 
 Email:  *  
 
 Company:   
 
 Country:  Select country United States Canada  *  
 
 State / province:  Other (Non US)  Wait...  
 
 City:  *  
 
 Address 1:  *  
 
 Address 2:   
 
 Zip / postal code:  *  
 
 Phone number:  *  
 
 Fax number:   
 
 
 
  
 
  

我有以下代码，但没有：

 $(".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; } }); 

Answer 1

不确定问题究竟是什么。 你问题的核心部分很简单。 要禁用按钮，只需向其添加disabled属性即可。 使用jQuery：

 $('#myButton').prop('disabled', true); 

现在，如果你的问题更多地与如何知道它应该被禁用有关，那就是你的全部。 基本上，您只需要绑定到您确定的一个或多个字段上的更改事件是确定的：即，如果用户填写此字段，则应禁用该按钮。 然后，在这些情况下禁用该按钮。

您可能还想使用像Knockout这样的框架进行调查。 通过将字段绑定为可观察对象，您可以立即收到有关更改的通知，并根据当前状态在页面上进行操作。 例如，您可以使用数据绑定，如：

 Submit 

假设SubmitDisabled是可观的，则提交按钮将被自动禁用或启用，具体取决于它在任何给定时刻是返回true还是false。

Answer 2

这应该禁用按钮：

 $( '.new-address-next-step-button' ).prop( 'disabled', true );