MVC6 - if(复选框勾选)然后删除

时间:2016-01-19 16:58:59

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

我有以下代码:

def show_magicians(magicians):
    for magician in magicians:
        print(magician)

def make_great(magicians):
    greats = []
    for magician in magicians:
        greats.append(magician + " the great")

    return greats

list_of_magicians = ["Omen", "Carla", "David"]

greats = make_great(list_of_magicians)

print(greats)

我希望能够读取是否勾选了复选框,如果是,则将删除线应用于TaskDetails。目前我正在努力找到实现这一目标的简单方法。

有什么想法吗?谢谢!

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:2)

使用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>