JQuery readOnly strange behavior

Question

I have the following HTML code:

<input type="text" id="test" ><br>
<button onclick="makeReadOnly('true')">Make read only (ok)</button>
<button onclick="makeReadOnly('false')">Make read/write (not ok)</button> 
<button onclick="makeReadOnly(false)">Make read/write (ok)</button>

with this script:

function makeReadOnly(r) {
    $("#test").prop("readOnly", r);

}

My problem is: call to makeReadOnly(false) works, while makeReadOnly('false') doesn't.

But makeReadOnly('true') works.

(tested with JQuery 1.9.1)

Who can explain me why ?

http://jsfiddle.net/ym9qe99p/1/

Answer 1

Because of casting. The string "false" is cast as a Boolean true. Basically, any non-empty string is (along with 0 and a couple other things). Try it! Boolean("false").

The readOnly property casts its input to a Boolean. Therefore both "true" and "false" become true, and only false stays false.