Question

我在MVC应用程序中有一个访问模型数据的视图，

<tbody>
@foreach (var item in Model)
{
        <tr>
            <td class="details-control" style="text-align: center; vertical-align: middle">
                @Html.DisplayFor(modelItem => item.ProductName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.NoOfProducts)
            </td>
            <td>
                @Html.CheckBoxFor(modelItem => item.IsEnabled.Value, new {id = "chkIsEnabled", onclick = "EnableDisableProduct(" + item.ProductId + ")"})
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)</td>
            </td>
            <td>
                <a class="btn icon-btn btn-primary" href="@Url.Action("Index", "Home", new
                    {
                        ProductId = item.ProductId
                    })">
                <span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-primary"></span>
                </a>
            </td>
        </tr>
}
</tbody>

以下是我的JavaScript函数，

function EnableDisableProduct(ProductId) {
    if ($("#chkIsEnabled").is(':checked')) {
        alert("checked");
    } else {
        alert("unchecked");
    }
}

我的表中有5个复选框，所以当我在第一个复选框上选中/取消选中时，它完美地运行。但是当我选中/取消选中其余复选框时，它会根据最终点击继续显示已选中或未选中状态。

例如，

 1st checkbox checked   - "checked" alert box,
 2nd checkbox checked   - "checked" alert box,
 1st checkbox unchecked - "unchecked" alert box,
 3rd checkbox checked   - "unchecked" alert box,
 4th checkbox checked   - "unchecked" alert box

我不知道我在这里做错了什么。

Answer 1

元素ID必须是唯一的。因此，将模板更改为：

<td>
    @Html.CheckBoxFor(modelItem => item.IsEnabled.Value, new {onclick = "EnableDisableProduct(this, " + item.ProductId + ")"})
</td>

这样你实际上根本不需要它：

function EnableDisableProduct(checkbox, productId) {
    if (checkbox.checked) {
        alert("checked");
    } else {
        alert("unchecked");
    }
}

Answer 2

您的html（重复的id属性）无效，而您的$("#chkIsEnabled")选择器只会选择id="chkIsEnabled"的第一个元素

更改复选框以改为使用类名

@Html.CheckBoxFor(m => item.IsEnabled.Value, new { @class = "chkIsEnabled" })

$(".chkIsEnabled").click(function() {
    if ($(this).is(':checked')) {
        alert("checked");
    } else {
        alert("unchecked");
    }
}

附注：使用foreach循环意味着在提交表单时，您的复选框不会绑定到您的模型。您使用IsEnabled.Value表示该属性为nullable boolean，这意味着即使您使用for循环或EditorTemplate

，它仍然无法绑定

jquery复选框：选中不起作用

2 个答案: