MVC6 - 如果（勾选复选框）然后删除线答案

【问题标题】：MVC6 - if(checkbox ticked) then strikethroughMVC6 - 如果（勾选复选框）然后删除线
【发布时间】：2016-01-19 16:58:59
【问题描述】：

我有以下代码：

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

我希望能够读取复选框是否已打勾，如果是，请对 TaskDetails 应用删除线。目前，我正在努力寻找任何简单的方法来实现这一目标。

有什么想法吗？谢谢！

【问题讨论】：

您希望在选中/取消选中时动态发生这种情况，还是在根据复选框的值从服务器加载标记时最初应用它？
动态的，好问题！

标签： c# asp.net asp.net-mvc razor asp.net-core-mvc

【解决方案1】：

使用jquery，您可以像下面的代码 sn-p 一样轻松地做到这一点。

$("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>

【讨论】：

【解决方案2】：

在模型中添加一个 bool 属性以确定任务是否完成：

public bool IsComplete { get;set; }

那么在您看来，您可以执行以下操作：

@foreach (var item in Model.AllTasks)
{
   @:<tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>
      @if (item.IsComplete)
      {
      @:<strike>
      }
      @Html.DisplayFor(modelItem => item.TaskDetals)
      @if (item.IsComplete)
      {
       @:</strike>
      }
    </td>
  @:</tr>
}

这只是检查状态，然后有条件地打印strike 标签。

Working fiddle

如果您想通过 javascript 执行此操作，当他们选中该框时，您可以使用以下代码：

  $("[type=checkbox]").change(function() {
    if(this.checked) {
     $(this).parent().next().wrapInner("<strike></strike>")
    }
   });

这将使用strike 标记动态包装文本。

jsFiddle

【讨论】：