Добавленный текст не отображается в textarea при переключении атрибутов readonly или disabled

Question

У меня есть текстовое поле, которое я хотел бы отключить или прочитать только. Я использую кнопки на своем сайте, чтобы добавить текст в это текстовое поле, чтобы делать заметки. Цель не допускать редактирования заключается в том, что никто не может случайно изменить какие-либо заметки.

Теперь, если кому-то нужно изменить примечание, которое они уже отправили, я бы хотел, чтобы он/она мог редактировать текстовое поле и снова блокировать его для редактирования.

HTML:

<p><a id="append">Append</a> | <a id="lock">Lock</a> or <a id="unlock">Unlock</a></p> 
<p><textarea id="notes" readonly="true" rows=10></textarea></p> 

JQuery:

$("a#append").click(function() { 
    $("textarea#notes").append("- This is a note.\n"); 
}); 
$("a#unlock").click(function() { 
    $("textarea#notes").removeAttr("readonly"); 
}); 
$("a#lock").click(function() { 
    $("textarea#notes").attr("readonly", "readonly"); 
}); 

http://jsfiddle.net/ljpaul/bakcwtaf/

Проблема: при повторной блокировке текстового поля (либо только для чтения или отключить атрибут), когда я нажимаю, чтобы добавить еще один Заметьте, что он не отображается. Как ни странно, он появляется в HTML-коде, он просто не отображается. У кого-нибудь есть предложения по исправлению этого/заставить его работать? Я чувствую, что я пробовал почти каждую комбинацию атрибутов и способов настройки указанных атрибутов!

Редактировать: пользователь разблокирует это поле, чтобы либо внести изменения в заметку, либо удалить заметку. Поэтому при разблокировке и внесении каких-либо изменений в содержимое возникает проблема.

Answer 1

Похоже, все, что требовалось, было уйти от функции .append().

$("textarea#notes").val($("textarea#notes").val() + "- This is a note.\n"); 

Это делает трюк и позволяет редактировать. Я думаю, что это может быть связано с добавлением таргетинга на структуру HTML вместо редактирования фактического значения. Очень странно.