问题
this question is two part. I am trying to do two things here depending on the users actions. I have a page that displays the shipping addresses if more than one exist in a button kind of list. If there are more than one address, more than one button will appear. The user also has the ability to enter in a new address. This is from NopCommerce checkout.
What I would like to do, is if the user selects a particular address to use by clicking the button, then get that shipping information and disable the button click, perform validation and then allow the click to continue if okay.
However, if the user enters a new address, I would like to disable the "submit" button at the bottom, verify the info, if all is good, move forward through the steps. This is the more important part right now.
Can someone assist in disabling the submit button at the bottom of this form? I have tried a few ways, but can't get it.
Here is the form data:
<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>
I have the following code but nothing:
$(".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;
}
});
回答1:
Not sure exactly what the issue is. The core part of your question is easy enough. To disable a button you just add a disabled attribute to it. With jQuery:
$('#myButton').prop('disabled', true);
Now, if your question has more to do with how to know when it should be disabled, that's kind of all on you. Basically, you'll just need to bind to the change event on one or more fields that you determine are definitive: i.e., if the user filled this field out, then the button should be disabled. Then, disable the button in those scenarios.
You may also want to investigate using a framework like Knockout. By binding fields as observables, you can be instantly notified of changes and have things happen on page based on current statuses. For example, you can use a data bind like:
<button type="submit" data-bind="attr: { disabled: SubmitDisabled }">Submit</button>
And assuming SubmitDisabled is an obversable, the submit button would be disabled or enabled automatically depending on whether it returned true or false at any given moment.
回答2:
This should disable the button:
$( '.new-address-next-step-button' ).prop( 'disabled', true );
来源：https://stackoverflow.com/questions/22105944/using-jquery-to-disable-submit-button-and-or-get-value-of-form-action