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

Question

这个问题分为两部分。根据用户的操作，我在这里尝试做两件事。 如果按钮类型的列表中存在多个，我有一个页面显示送货地址。如果有多个地址，则会出现多个按钮。用户还可以输入新地址。这是来自 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="&#39;Id&#39; 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;
        }
    });

Answer 1

不确定到底是什么问题。你问题的核心部分很简单。要禁用按钮，您只需为其添加 disabled 属性。使用 jQuery：

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

现在，如果您的问题更多地涉及如何知道何时它应该被禁用，这完全取决于您。基本上，您只需要在一个或多个您确定是确定的字段上绑定更改事件：即，如果用户填写了此字段，则应禁用该按钮。然后，在这些情况下禁用按钮。

您可能还想使用 Knockout 等框架进行调查。通过将字段绑定为可观察对象，您可以立即收到更改通知，并根据当前状态在页面上发生事情。例如，您可以使用如下数据绑定：

<button type="submit" data-bind="attr: { disabled: SubmitDisabled }">Submit</button>

假设SubmitDisabled 是可观察的，提交按钮将根据在任何给定时刻返回真或假而自动禁用或启用。

Answer 2

这应该禁用按钮：

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