Why does the content of my label not change with this jQuery?

I want to change the content of a label via jQuery. I've got this code:

HTML

<input type="checkbox" id="ckbxEmp" >Employee?
<label id="lblSSNOrITIN">Bla</label>

jQuery

$(document).on("change", '[id$=ckbxEmp]', function () {       
    var ckd = this.checked;
    var $lbl = $('[id$=lblSSNOrITIN]');      
    $lbl.prop("content", ckd ? "SSN" : "ITIN");
}); 

...which can be fiddled with here

Label does not have a "text" CSS property (I checked it here) and tried it, so I thought "content" was the way to go - but that doesn't seem to work, either. I want "Bla" to change to "SSN" when the checkbox is checked, and to "ITIN" when it is unchecked, but it stays "Bla" no matter how many PSI I apply to the mouse when checking/unchecking the check box. I even thought about whacking it with a hammer, but...it's not my mouse.

Upvotes: 0

Views: 65

Answers (1)

user1189882
user1189882

Reputation:

Try using .html() if you have html code too or .text() for just plain text instead of .prop("content", ...), like this:

$lbl.text(ckd ? "SSN" : "ITIN");

http://jsfiddle.net/euukvsja/

Upvotes: 5

Related Questions