Question

起初我有这个MVC视图，它显示了数据库中的特定记录列表，这是代码，你可以看到有一个复选框列

 <tbody>
                                    @foreach (var item in Model)
                                    {
                                        <tr>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.numero_documento)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.nombre_accion_formativa)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.nombre_empresa)
                                            </td>
                                            <td>
                                                <input type="checkbox" name="code" value="@item.numero_documento" +"a" />
                                            </td>
                                        </tr>
                                    }
                                </tbody>

当按下提交按钮时，它会验证至少必须选中一个复选框，如此

$("#btn-agrupar").click(function (e) {
    if ($("input[type='checkbox']").is(':checked') === true)
        $("#FormAgrupar").submit();
    else {
        if (e.preventDefault) {
            e.preventDefault();
            $("#mostrarmodal").modal("show");
        }
        else {
            e.returnValue = false;
            $("#mostrarmodal").modal("show");
        }
    }
});

并且以前工作但是现在我必须添加另一个复选框列并使用jQuery将特定控制器发送到表单中的信息，这是视图的代码

<tbody>
                                    @foreach (var item in Model)
                                    {
                                        <tr>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.numero_documento)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.nombre_accion_formativa)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.nombre_empresa)
                                            </td>
                                            <td>
                                                <input type="checkbox" name="delete" value="@item.numero_documento" +"a" />
                                            </td>
                                            <td>
                                                <input type="checkbox" name="code" value="@item.numero_documento" +"a" />
                                            </td>
                                        </tr>
                                    }
                                </tbody>

这是我的jQuery的代码，问题是现在它没有验证是否至少检查了一个复选框没有复选框列，你能帮帮我并告诉我这个问题吗？

 $("#btn-agrupar").click(function () {
            if ($("input[type='checkbox']").is(':checked') === true) {
                var form = $("#FormAgrupar");
                form.attr("action", "@Url.Action("RealizarAgrupacion","Home")");
                form.submit();
            }
            else {
                if (e.preventDefault) {
                    e.preventDefault();
                    $("#mostrarmodal").modal("show");
                }
                else {
                    e.returnValue = false;
                    $("#mostrarmodal").modal("show");
                }
            }
        });

        $("#btn-eliminar").click(function () {
            if ($("input[type='checkbox']").is(':checked') === true) {
                var form = $("#FormAgrupar");
                form.attr("action", "@Url.Action("Index","Contact")");
                form.submit();
            }
            else {
                if (e.preventDefault) {
                    e.preventDefault();
                    $("#mostrarmodal").modal("show");
                }
                else {
                    e.returnValue = false;
                    $("#mostrarmodal").modal("show");
                }
            }
        });

这是我表格中按钮的代码

<input type="button" value="Cancelar" id="btn-cancelar" class="btn btn-danger" />
                        <input type="button" value="Eliminar Solicitudes" id="btn-eliminar" class="btn btn-danger" />
                        <input type="button" value="Agrupar Solicitudes" id="btn-agrupar" class="btn btn-primary pull-right" />

Answer 1

如果我正确理解了您的问题，您似乎在区分这两个复选框时遇到了问题。您可以尝试使用它的名称来引用该复选框并查看它有帮助。

例如：

if ($("input[name='delete']").is(':checked') === true) {
    //Do something
}
if ($("input[name='code']").is(':checked') === true) {
    //Do something
}

要检查视图中的所有复选框，请使用prop功能

$('input:checkbox').prop('checked', true);

Answer 2

您似乎错过了

中的e事件参数

$("#btn-agrupar").click(function () ...

应该是：

$("#btn-agrupar").click(function (e) ...

Answer 3

似乎两个复选框列都没有任何区别。您可以指定一些html属性，如aria-describedby属性。例如对于第一个Checkbox aria-describedby =“Delete”和第二个aria-describedby =“code”如下所示

<tbody>
    @foreach (var item in Model)
    {
      <tr>
        <td>
            @Html.DisplayFor(modelItem => item.numero_documento)
       </td>
       <td>
          @Html.DisplayFor(modelItem => item.nombre_accion_formativa)
       </td>
       <td>
          @Html.DisplayFor(modelItem => item.nombre_empresa)
       </td>
       <td>
          <input type="checkbox" name="delete" aria-describedby="Delete" value="@item.numero_documento" +"a" />
       </td>
       <td>
          <input type="checkbox" name="code" aria-describedby="Code" value="@item.numero_documento" +"a" />
       </td>
     </tr>
    }
</tbody>

最好检查选中复选框的长度，因为你说至少有一个复选框可以检查意味着所有都不是必须检查的。在这种情况下，尝试更改代码如下。

$("#btn-agrupar").click(function (e) {
            if ($("input[aria-describedby='Delete']").is(':checked').length) {
                var form = $("#FormAgrupar");
                form.attr("action", "@Url.Action("RealizarAgrupacion","Home")");
                form.submit();
            }
            else {
                if (e.preventDefault) {
                    e.preventDefault();
                    $("#mostrarmodal").modal("show");
                }
                else {
                    e.returnValue = false;
                    $("#mostrarmodal").modal("show");
                }
            }
        });

如果以上代码有效，请更改按钮单击代码中的代码。

检查在MVC C＃和jQuery中提交表单之前是否选中了复选框

3 个答案: