TIL About One Strange Behavior of jQuery

#1

I was working on enabling and disabling buttons in JavaScript using jQuery method .prop. And I noticed this : $('.someBtnClass').prop('disabled', 'true'); works (to diable), but $('.someBtnClass').prop('disabled', 'false'); doesn’t work (to enable). One has to use false without any quotes like this $('.someBtnClass').prop('disabled', false); then it works. (I have also tried double quotes "false", that also doesn’t work).

Moral of the story: Such asymmetries create confusion. I wondered what the hell was wrong, even though everything seemed right. If quotes worked with true, it should have worked with false too. Or it shouldn’t have worked with both of them.

#2

Did you look at the source code for jQuery?

I always try when something odd like that occurs so I can see what may be happening. So I looked into this one and … it actually isn’t jQuery’s fault.

I stepped through jQuery’s code and, in the end, it does a simple elem[ name ] = value; assignment, which translates to:

elem.disabled = 'false';

So I tried that in the scratchpad for Firefox and it wouldn’t accept that. It will however, accept:

   elem.disabled = true;
   elem.disabled = 'true';
   elem.disabled = false;

Which bears out what you found.

So, it’s a browser issue, not specifically a jQuery issue.

Just out of curiosity, what browser are you using? I’m on FF 51 Beta 10.

Regards,
Micheal

1 Like
#3

Any truthy value (e.g. "false") will result in the element being disabled. Only setting it to false will remove the disabled property.

2 Likes
#4

Very good point! Truthy-ness coming to bite you in the a**. :slight_smile:

#5

Hey, thanks for the reply. Hmm, so it’s a browser’s fault. I am using Chrome version 55.0.2883.87 m (64-bit).

I am just at a beginner’s level in coding, so I don’t think I would understand much of it by looking into the source code. Though I will try it. :slight_smile:

And yeah I got it. 'false' is a string, which is truthy.

#6