Adding a Class to a Table Row Disables Editing TextArea

I have a table containing several columns one of which is a checkbox which indicates the vote is invalid. When the user selects this checkbox I add a "vote-invalid" class to the row at which point a textarea in the adjoining column can no longer be selected for input.

The HTML for the row is;

<tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td><input data-val="true" data-val-required="The Invalid field is required." id="Lots_0__Invalid" name="Lots[0].Invalid" type="checkbox" value="true"><input name="Lots[0].Invalid" type="hidden" value="false"></td>
    <td><textarea class="text-box multi-line" data-val="true" data-val-length="The note/comment cannot be longer than 500 characters" data-val-length-max="500" id="Lots_0__Note" name="Lots[0].Note"></textarea></td>
</tr>

and the script to add/remove the class is;

$("[id$='_Invalid']").click(function (evt) {
    var me = this;
    $tr = $(this).closest("tr");

    if (me.checked) {
        $tr.addClass("vote-invalid");
        $tr.find("textarea").prop("contentEditable", true);
    }
    else {
        $tr.removeClass("vote-invalid");
    }
});

Before the Invalid checkbox is selected the textarea is editable. When "Invalid" is checked the class is added to the row but I can no longer edit the textarea; I cannot get the textarea to accept focus by clicking in it or tabbing. When "Invalid" is unchecked I can edit the textarea again.

As the code above shows I have tried setting the "contentEditable" attribute to true with no success.

When the page is first loaded the textarea has the following properties; disabled: false contentEditable: inherited readOnly: false

After checking "Invalid" the properties are; disabled: false contentEditable: true readOnly: false