How can I disable a button using jQuery?

How can I disable a button using jQuery?

This code is working pretty well:

  1. $(document).on("change", '[id$=boxGrandTotal]', function () {
        var savebutton = document.getElementById('[id$=btnSave]');
        var payment = $('[id$=boxPaymentAmount]').val() != '' ? parseFloat($('[id$=boxPaymentAmount]').val()) : 0;
        var total = $('[id$=boxGrandTotal]').val() != '' ? parseFloat($('[id$=boxGrandTotal]').val()) : 0;
        if (payment == null) payment = 0;
        if (total == null) total = 0;
        if (payment == total) {
            alert('Total and Payment Total match.');
            savebutton.attr("disabled", false);
            return true;
        } else {
            alert('Total and Payment Total do not match. Please enter the same amount for both values and try again!');
            //savebutton.attr("disabled", true);
            savebutton.prop("disabled", true);
            return false;
        }
    });

That is to say, I see the "Total and Payment Total do not match. Please enter the same amount for both values and try again!" message when payment and total are not equal.

However, the button is not being disabled. I first tried:

  1. savebutton.attr("disabled", true);

...but with that I get, " cannot read property attribute of null"

So I tried the supposedly preferable:

  1. savebutton.prop("disabled", true);

...but with that I get, " Cannot read property 'prop' of null"

Whoever came up with the expression "cute as a button" was sadly mistaken - this button is crabbier than a two-year-old son of a congressman. How can I get it to disable?