jQuery Forum

How can I disable a button using jQuery?

in Using jQuery • 7 years ago

This code is working pretty well:

$(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:

savebutton.attr("disabled", true);

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

So I tried the supposedly preferable:

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?

Replies(18)

Re: How can I disable a button using jQuery?

7 years ago

disabled is no longer an attribute. It’s a property. You access properties with .prop()

.prop() | jQuery API Documentation

JΛ̊KE

Re: How can I disable a button using jQuery?

7 years ago

You mean like this:

savebutton.prop("disabled"): true;

Re: Re: How can I disable a button using jQuery?

7 years ago

That’s probably a typo.

See the syntax in the link I shared.

JΛ̊KE

Re: How can I disable a button using jQuery?

7 years ago

That's where I got it from. I'm trying this now (adding quotes to "true"):

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

Re: How can I disable a button using jQuery?

7 years ago

No quotes.

JΛ̊KE

Re: How can I disable a button using jQuery?

7 years ago

That was my first try, namely:

savebutton.prop("disabled", true);

Re: How can I disable a button using jQuery?

7 years ago

That’s the correct syntax. Did you get an error? are you sure savebutton is the button in question?

JΛ̊KE

Re: Re: How can I disable a button using jQuery?

7 years ago

Are you running something close to the current version of jQuery?

JΛ̊KE

Re: How can I disable a button using jQuery?

7 years ago

We are using a CDN to pull the latest jQuery version

Re: How can I disable a button using jQuery?

7 years ago

OK, then it must be a problem with your code.

JΛ̊KE

http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/

Re: How can I disable a button using jQuery?

7 years ago

We are using a CDN to pull the latest jQuery version

Are you sure? What exactly do you mean by "latest". See here:

Re: How can I disable a button using jQuery?

7 years ago

Actually, the later info I got was, "We are using the most up to date version of jQuery 1, not jQuery 2"

Re: How can I disable a button using jQuery?

7 years ago

" We are using the most up to date version of jQuery 1, not jQuery 2"

I'd be more confident if you'd posted a complete version number, a file name, or a URL link. This is still vague...

Are you the developer? How can you not know what you are using?

If you're not the person doing the work, get them on here. It's senseless talking through an intermediary.

Go read about the differences between jQuery 1.x and 2.x. 2 is not necessarily "the latest".

http://jquery.com/download/

1.x ( from 1.10 forward) is for all supported browsers.

2.x does not support IE 6,7,8. There are no functional differences between the latest 1.x and 2.x. 2.x is not "newer" or "later" than 1.x.

For web projects, you can just use 1.11.3 and it will work for all browsers. Alternately, there is some clever HTML that has been posted here time and again (Jake will kindly post it yet again) that will give 1.11.3 to IE 6,7,8 and 2.1.4 to all other browsers.

For PhoneGap, etc. hybrid apps, you should probably use 2.1.4, because it supports all current embedded mobile browsers.

Re: Re: How can I disable a button using jQuery?

7 years ago

I am one of the developers, but not the one who adds jQuery to the site; in fact, I don't even have access to look at that file. That's why I had to ask him.

Re: How can I disable a button using jQuery?

7 years ago

The exact version they are using makes no difference. The syntax to disable a button has not changed since around 1.6.

JΛ̊KE

Re: How can I disable a button using jQuery?

7 years ago

I am one of the developers, but not the one who adds jQuery to the site; in fact, I don't even have access to look at that file.

That's funny. Because every one of your USERS can look at that file! If they couldn't your site wouldn't work.

Open your site in a browser. Chrome would be super-dandy. Open the developer tools that are present in every modern desktop browser. (If you don't know about this, learn - it will be invaluable!)

Find the jQuery file in the file sidebar. Open it, and you will find the copyright notice with version at the beginning.

Anyway, Jake was just trying to determine if you were using a super-old version of jQuery. Apparently you are not.

But... did you get it that there is no longer a CDN "latest version"? You should load a specific version from the CDN. The "jquery-latest" file is out of date and always will be. If you follow the link I provided it explains why that file even still exists. If they removed it, it would "break the Internet".

Anyway, back to your problem. It looks like you mis-read the code from the example. There are a number of ways of passing values to .prop() and the use of an object is shown in an example near the bottom of the page:

$( "input[type='checkbox']" ).prop({
  disabled: true
});
Notice the squiggly-brackets.
That's one way. Jake showed you another. If you pass an object as shown in the example,you can set multiple properties in one call. They choose a bad example for that syntax,since only one property is being set!

Re: Re: How can I disable a button using jQuery?

7 years ago

Thanks for that tip!

In the Chrome Dev Tools, navigating to Sources > ajax.googleapis.com > ajax/libsjquery/1 > jquery.min.js indicates it's 1.11.1: