如何禁用此保存/提交按钮？

Question

我想知道单击后禁用此保存按钮的最佳方法是什么？

这是代码：

<button data-bind="enable: !$root.isSaving(), click: $root.addNewCard.bind($data, $root)" class="primary button" role="button" data-size="sm">
                                Save
                                </button>

以上是.cshtml代码

下面是javascript代码：

BillingInformation.prototype.addNewCard = function (parent, creditCard) {
parent.isSaving(true);
parent.isSettingDefault(true);

creditCard.cardNumber(creditCard.cardNumber().replace(/-|\s/g, ''));

let $form = $('#addNewCardForm' + creditCard.walletItemId()),
    cardNumber = creditCard.cardNumber();

parseDynamicFormElements($form);

if ($form.valid()) {
    verifyAddress($form, function () {
        authentication.checkReAuthenticatedThenLaunchLoginOrExecuteTask(() => {
            creditCard
                .save()
                .then(response => {
                    if (response.status === HTTP_STATUS_OK) {
                        creditCard.walletItemId(response.content);
                        parent.walletItems.push(creditCard);
                        creditCard.lastFourDigits(
                            creditCard.cardNumber() ? creditCard.cardNumber().substr(-4) : ''
                        );
                        creditCard.obfuscatedCardNumber(cardNumber.replace(/.(?=.{4})/g, '*'));
                        parent.newCardInstance(new CreditCard({paymentType: 'creditCards'}));
                        checkForRedirect();
                    } else {
                        let container = document.createElement('div');
                        container.append(
                            'We were unable to save your payment information. Please try again or give us a call at 1-800-461-8898'
                        );
                        smartPak.ui.modal(container, {
                            title: 'Unable to Save Payment Method',
                            buttons: {
                                Close: function (modal) {
                                    modal.close();
                                }
                            }
                        });
                    }
                })
                .then(() => {
                    parent.isSaving(false);
                });
        });
    });
    parent.isSaving(false);
} else {
    parent.isSaving(false);
    parent.isSettingDefault(false);
}

};

防止在提交后被多次点击的最佳方法是什么？ 目前，如果点击多次，它将复制 cc。

谢谢！

Answer 1

也许 enable 属性应该绑定到一个变量，而不是像你在

enable: !$root.isSaving()

Answer 2

您是否尝试将点击：$root.addNewCard.bind($data, $root) 切换为点击：$root.addNewCard.bind($root, $data)？ 根据您的声明 BillingInformation.prototype.addNewCard = function (parent, creditCard) creditCard = $data from the form and parent = $root?