javascript - 如何在没有ID的情况下标记循环生成的复选框？

Question

我将尽力描述我的问题，这很难用语言表达。

在我的页面上，我有一个文本框和一个按钮。我在文本框中输入用户名，然后单击按钮以返回所有用户信息。

在此之下，我有一个由用户可能所在的数据库中每个 Angular 色的 foreach 循环生成的表，旁边有 2 个复选框。即使在单击按钮之前，也会显示 Angular 色和文本框。

当用户信息返回时，无论用户处于哪个 Angular 色，我都需要选中这些框。

这看起来很简单，我只是很难弄清楚如何定位每个特定的复选框，因为它们是在循环中创建的，不允许我给它们特定的 ID。

<table border="1" id="ApplicationRoles">
            <thead>
                <tr>
                    <th style="text-align:center" width="300">Role</th>
                    <th style="text-align:center" width="300">Category 1</th>
                    <th style="text-align:center" width="300">Category 2</th>
                </tr>
            </thead>
            <tbody>

                @foreach (var role in Model.appRoles)
                {
                   <tr>
                        <td>
                            @Html.DisplayFor(modelItem => role.Name)
                        </td>
                        <td>

                            <input type="checkbox"  />

                        </td>
                        <td>
                            <input type="checkbox" />

                    </tr>
                }
            </tbody>
        </table>

使用 javascript，我可以检查用户所处的 Angular 色，但是如何定位特定的复选框来检查它(假设用户处于此 Angular 色)，而无法为每个 Angular 色提供一个 ID？

Answer 1

最简单的方法是分配一个想法，这样可以更轻松地通过 jquery 选择。因为你用的是 Razor 。看起来像这样。

foreach (var role in Model.appRoles)
{
    <input type="checkbox" id="chk_@(role.Name)" />
}

然后，当您尝试获取复选框时，您将使用这样的选择器。

$('#chk_' + roleName).prop('checked',true);

如果您需要严格使用 jQuery 来获取复选框。你可以做这样的事情......

http://jsfiddle.net/8q9cco37/

var user = {'role':'ADMIN2'};

var $roleMatch = $('td').filter(function(){
   return $(this).text().toLowerCase() == user.role.toLowerCase();
});

var chk1 = $roleMatch.next('td').find('input');
var chk2 = $roleMatch.next('td').next('td').find('input');

chk1.prop('checked',true);
chk2.prop('checked',true);