text area is not disabling or staying disabled

Question

I have a checkbox:

<input type="checkbox" id="catDescript" class="category_description" name="aisis_options[category_description]" value="category_description">

and a text area

<textarea id="categoryHeader" class="input-xlarge" name="aisis_options[category_header_text]" rows="10" cols="100%"></textarea>

and the following Jquery, which is suppose to one disable the text area upon clicking the check box and two keep the text area disabled as long as the check box is clicked.

$("#catDescript").change(function() {
    if($(this).is(":checked")) {                
        $("#categoryHeader").attr("disabled", "disabled");
    }
    else {
        $("#categoryHeader").removeAttr("disabled");
    }
}); 

if ($('input[value=category_description]:checkbox:checked').attr('id') === "catDescript") {
    $('#categoryHeader').attr('disabled', 'disabled');
}

The problem is, I click the check box, the text area does not become disabled. I click submit the check box is checked but the text area is not disabled.

What am I doing wrong? please post a jsfiddle.

it doesn't work for me and I have the java script wrapped in jquerys document jazz. — TheWebs, Mar 04 '13 at 18:00

Ram · Answer 1 · 2013-03-04T17:49:14.543

4

For modifying properties of elements, prop method should be used instead of attr.

$(function() {
    $("#catDescript").change(function() {
        $("#categoryHeader").prop("disabled", this.checked);
    }).change(); // trigger the event on DOM Ready
})

edited Mar 04 '13 at 17:49

answered Mar 04 '13 at 17:42

Ram

143,282
16
168
197

text area is not disabling or staying disabled

1 Answers1