jquery - 文本区域未禁用或保持禁用状态

Question

我有一个复选框：

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

和一个文本区域

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

和下面的 Jquery，假设一个在单击复选框时禁用文本区域，两个在单击复选框时保持文本区域禁用。

$("#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');
} 

问题是，我点击了复选框，文本区域并没有被禁用。我单击提交复选框已选中，但文本区域未禁用。

我究竟做错了什么？请发布一个jsfiddle。

Answer 1

要修改元素的属性， prop应该使用 method 而不是attr.

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