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

Question

I am wondering what is the best method to disable this save button after one click?

Here is the code:

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

Above is the.cshtml code

Below is the javascript code:

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);
}

};

What is the best method to prevent this from being clicked more than once after submission? currently if clicked multiple times it will duplicate the cc.

Thank you!

Answer 1

Maybe the the enable property should bind to a variable, not a function like you do in

enable: !$root.isSaving()

Answer 2

did you try switching click: $root.addNewCard.bind($data, $root) to click: $root.addNewCard.bind($root, $data)? according to your declaration BillingInformation.prototype.addNewCard = function (parent, creditCard) creditCard = $data from the form and parent = $root?