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?

Claudio Redi · Accepted Answer · 2012-06-26 14:58:11Z

9

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.

edited Jun 26, 2012 at 14:58

answered Jun 26, 2012 at 14:52

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Removing and adding disabled attribute with jQuery from a html checkbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related