时间戳

首页 > 解决方案 > 选中/取消选中复选框时更改行的颜色

jquery - 选中/取消选中复选框时更改行的颜色

问题描述

当复选框值更改时，我一直在尝试更改行的颜色，但没有任何效果。这是我尝试过的：

<script>    
$('input[name="chkConcluida"]').on('change', function () {
            $(this).closest('tr').toggleClass('bg-success', $(this).is(':checked'));
    });
</script>

桌子：

<div class="container">
<table id="tarefa" class="table table-bordered" style="width:100%">
    <tr>
        <th style="display:none">
            @Html.DisplayNameFor(model => model.TAR_ID)
        </th>
        <th class="col-sm text-muted" style="width: 10%">
            @Html.DisplayNameFor(model => model.TAR_CONCLUIDA)
        </th>
        <th class="col-sm text-muted" style="width: 72.9%">
            @Html.DisplayNameFor(model => model.TAR_DESCRICAO)
        </th>
        <th class="col-sm text-muted">
            Ações
        </th>
    </tr>

    @foreach (var item in Model)
    {
           <tr>
                <td style="display:none">
                    @Html.DisplayFor(modelItem => item.TAR_ID)
                </td>
                <td class="text-center align-middle">
                    <input type="checkbox" name="chkConcluida" id="chkConcluida" onclick="MudarCheckbox(this, @item.TAR_ID)" checked/>
                    @*@Html.CheckBoxFor(modelItem => item.TAR_CONCLUIDA, new { onclick = "MudarCheckbox(this, " + item.TAR_ID + ") "})*@
                </td>
                <td class="h5 align-middle">
                    @Html.DisplayFor(modelItem => item.TAR_DESCRICAO)
                </td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" href="#editarTarefa" data-tarefa-descricao="@item.TAR_DESCRICAO" data-tarefa-id="@item.TAR_ID">Editar</button>
                    <button type="button" class="btn btn-danger" data-toggle="modal" href="#removerTarefa" data-tarefa-id="@item.TAR_ID">Remover</button>
                </td>
            </tr>
    }

</table>

这是一个 ASP.NET MVC BOOTSTRAP 4 应用程序。我已经阅读了很多类似的问题，但对我没有任何帮助。

标签： jqueryasp.netmodel-view-controller

解决方案

我的第一个猜测是你的 css 是错误的。我建议故障排除如下：

首先，检查事件是否console.debug('fired');通过调用或调用来触发alert('fired');。如果您在选中该框后没有得到任何结果，则意味着您没有将事件处理程序附加到正确的元素。其次，通过对类进行硬编码来检查 css 是否正常工作：<tr class="bg-success">. 最后，我会检查您是否获得了正确的 tr 元素。为此，您可以在其上放置一个 id 并将其打印出来：alert($(this).closest('tr').attr('id'));

这是一个有效的 JSFiddle：http: //jsfiddle.net/snLxhd15/4/

推荐阅读