Question

我有一个包含多个列的表，其中一列是checkbox，表示投票无效。当用户选择此checkbox时，我会向该行添加“投票无效”类，此时无法再选择相邻列中的文本区域进行输入。

该行的HTML是;

<tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>
       <input type="checkbox"
              id="Lots_0__Invalid" 
              name="Lots[0].Invalid"
              value="true"
              data-val="true" 
              data-val-required="The Invalid field is required.">

       <input name="Lots[0].Invalid" type="hidden" value="false">
    </td>
    <td>
       <textarea id="Lots_0__Note" 
                 name="Lots[0].Note"
                 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"></textarea>
    </td>
</tr>

和添加/删除类的脚本是;

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

在选择无效checkbox之前，textarea是可编辑的。选中“无效”时，该类会添加到该行，但我无法再编辑textarea;我无法通过点击它或标签来让textarea接受焦点。取消选中“无效”后，我可以再次修改textarea。

如上面的代码所示，我尝试将“contentEditable”属性设置为true，但没有成功。

首次加载页面时，textarea具有以下属性;

disabled: false
contentEditable: inherited
readOnly: false

检查“无效”后，属性为;

disabled: false
contentEditable: true
readOnly: false

使用的类是;

.vote-invalid{
        background-color: orange !important;
        color: white;
    }

    .vote-invalid:hover{
        background-color: darkorange !important;
    }

将类添加到表行禁用编辑TextArea

0 个答案: