Removing and adding disabled attribute with jQuery from a html checkbox

Question

I am in the process of learning jQuery and in a bit of a pickle with adding and removing the disabled attribute from an html checkbox. I am wanting it so that when you check the box you can't write in a textarea an address, or else you have to select from a search box. I have the later done, but the checkbox is causing my trouble. This is my function call. It enters the function just fine, but isn't removing the disabled attributes when checked and throws an error that it can't use the addAttr method to add the disabled back.

//attach an event for clicking on the informal contact button
jQuery(document).ready(
    function () {
        jQuery('.InformalContact').live('click',
        function (event) {
            TestIfInformalContactIsChecked(event);
        });
    }
);

//check the status of the informalcontact checkbox when a user activates it
//If checked, user can input data in the contactinfo manually.
function TestIfInformalContactIsChecked(event) {
    var thisCheck = jQuery(event.target);
    if (thisCheck.is(':checked')) {
        jQuery("#ContactInfo").removeAttr('disabled');
    }
    else {
        jQuery("#ContactInfo").addAttr('disabled');     
    }
}

And this is the html...

<div class="TBItemColumn1">
    Name: <input id="Name" value="" class="TBFindContact" style="width: 150px;" maxlength="50" type="text" /><br />
    <input id="InformalContact" class="InformalContact" maxlength="50" type="checkbox" ClientIDMode="Static"  />Informal Contact<br />
    <div id="TBContactSearchBox"></div>
    Notes:
    <br />
    <textarea id="Notes" style="width: 280px; height: 20px;"></textarea>
  </div>
  <div class="TBItemColumn2">
    <div class="FloatLeft">
      Contact Info:
      <br />
      <textarea id="ContactInfo" value="" style="width: 280px; height: 70px;" disabled="disabled"></textarea>
    </div>
  </div>

What am I messing up with setting the disabled attribute on the checkbox?

Answer 1

To enable use this

jQuery("#ContactInfo").prop('disabled', true);

and this to disable

jQuery("#ContactInfo").prop('disabled', false);

If you remove a native property as disabled using removeAttr (or removeProp) you won't be able to add it again. It's not supposed to be used for changing the property value.