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

标签 javascript jquery asp.net checkbox

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

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

在此之下,我有一个由用户可能所在的数据库中每个 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?

最佳答案

最简单的方法是分配一个想法,这样可以更轻松地通过 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);

关于javascript - 如何在没有ID的情况下标记循环生成的复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33925372/

相关文章:

javascript - 将 iframe 上的 mousemove 事件冒泡到容器 div

javascript - 如何显示 slider 左侧的navigationMenu div

c# - 使浏览器图标在任务栏中的通知上闪烁

c# - 将 OpenID Connect 与事件目录联合服务 (ADFS) 结合使用时,如何包含对 id_token 的附加声明?

javascript - Firefox 中的 window.opener 引用丢失

javascript - 将 FileList 拆分为单独的文件输入元素

javascript - 如何从复选框中删除 'being pressed' 状态?

jquery - AngularJS 帖子的全局标题

c# - 使用图像控件显示服务器上传的图像

c# - 使用应用程序池凭据发送电子邮件