c# - MVC6 - 如果(复选框勾选)则删除线

Question

我有以下代码:

<table class="table">
@foreach (var item in Model.AllTasks)
{
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TaskDetails)
        </td>
    </tr>
}

我希望能够读取该复选框是否被选中，如果是，则对任务详细信息应用删除线。目前我正在努力寻找任何简单的方法来实现这一目标。

有什么想法吗？谢谢!

Answer 1

使用jquery你可以像下面的代码片段一样轻松地做到这一点。

$("input[type=checkbox]").change(function() {
  if (this.checked) {
    $(this).parent().next().css('text-decoration', 'line-through');
  } else {
    $(this).parent().next().css('text-decoration', 'none');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox"></td><td> Box 1 </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td><td> Box 2 </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td><td> Box 3 </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td><td> Box 4 </td>
  </tr>
</table>