Question

我遇到的问题是这个; 我使用的编辑器模板如下;

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.WebUI.Models.OtherTeam>" %>

<fieldset>
    <legend><%:Model.Approver.GetName() %> team.</legend>
    <table class="groupBorder">
    <tr>
        <th align="right">Name</th>
        <th><div>Entitlement</div><div>THIS Year</div></th>
        <th><div>Days Left</div><div> THIS Year</div></th>
        <th><div>Leave</div><div>Taken</div></th>
        <th><div>Future</div><div>Booked</div><div>Leave</div></th>
        <th><div>Days Left</div><div> NEXT Year</div></th>
        <th align="center"><div style="padding-bottom:5px;">Select</div><div style="padding-left:11px;">
        <input type="checkbox" id="OtherSelectAll" /></div></th>
    </tr>
    <tbody  id="OtherSelectContainer">
    <%: Html.EditorFor(model => model.TeamMembers) %>
    </tbody>
    <tr>
        <td colspan="2" align="right">Date From</td>
        <td colspan="6"><%: Html.EditorFor(model => model.CalendarVM.Dates.DateFrom) %></td>
    </tr>
    <tr>
        <td colspan="2" align="right">Date To</td>
        <td colspan="6"><%: Html.EditorFor(model => model.CalendarVM.Dates.DateTo)%>OR last holiday date <%: Html.EditorFor(model => model.CalendarVM.Dates.LastHolidayDateFlag)%></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td colspan="6" align="left"><input type="submit" value="Submit" id="btnSubmit"/></td>
    </tr>
</table>
</fieldset>
<script language="javascript" type="text/javascript">
    $('#OtherSelectAll').change(function () {
        if ($(this).is(':checked')) {
            $('#OtherSelectContainer').find('input:checkbox').attr('checked', true);
        }
        else {
            $('#OtherSelectContainer').find('input:checkbox').removeAttr('checked');
        }
    }); 
</script>

第一次输出时效果很好。但是，ID之后会发生冲突，因此“全选”复选框不再有效。我需要tbody元素的ID是唯一的，同时实现Select All功能的jquery需要知道ID是什么。那我该怎么做呢？

Answer 1

使用CSS类名代替jQuery操作。

如何为容器元素创建唯一的ID？

1 个答案: