jquery - 复选框选择上的文本删除线

Question

我知道这个问题已被问过多次，但我无法让它工作，我有一个循环遍历集合的表，每行都有一个复选框，我想删除描述的文本复选框被选中？？？？？。感谢您的帮助!!

表格

    <table class="table table-striped">
    <tr><th>Task Description</th><th>Completed</th>
    @if (Model.ListOfTasks.Count() == 0)
    {
        <tr><td colspan="3" class="text-center">No Tasks</td></tr>
    }
    else
    {
        foreach (var task in Model.ListOfTasks)
        {
            <tr>
                @Html.HiddenFor(x => x.TaskID)                
                <td><span>@task.Description</span></td>
                <td>

                    @using (Html.BeginForm("Complete", "Task", new { id = task.TaskID }))
                    {
                        <input type="checkbox" id="checkbox" />
                    }

                </td>                
                <td>
                    @using (Html.BeginForm("Delete", "Task", new { id = task.TaskID }))
                    {
                      <button class="btn btn-danger btn-xs" type="submit">Remove</button>
                    }
                </td>
            </tr>
        }
    }
</table>

<a href="#" onclick="ShowTaskPopup()" class="btn btn-primary">Add</a>

<div class="modal fade" id="popupTaskForm" style="display: none;">
    <div class="modal-header">Add New Task</div>
    <div class="modal-body">

    @Html.ValidationSummary(false)
    @using (Html.BeginForm("Create", "Task", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()

        <form class="well">
            <fieldset>
                <table class="table-condensed">                    
                    <tr class="strikeout">
                        <td><label>Task Name</label></td>
                        <td>@Html.TextBoxFor(x => x.TaskName, new { @class = "form-control" })</td>

                        <td><label>Description</label></td>
                        <td>@Html.TextBoxFor(x => x.Description, new { @class = "form-control" })</td>
                    </tr>
                 </table>
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
              </fieldset>
        </form>           
     }
    </div>
    </div>

查询

  $('#checkbox').change(function () {

            if (this.checked) {
                $(this).parent().parent().css("text-decoration","line-through");
            } else {
                $(this).parent().parent().css("text-decoration", "none");
            }
        });

Answer 1

Razor 将添加 <form>复选框周围的标签，因此您将 css 应用于 <td>包含复选框，而不是您可能认为的父行 parent().parent();

尝试使用最近的选择器遍历dom树并找到父行:

$(this).closest("tr").css("text-decoration","line-through");