Question

The problem I have is this;
I am using an editor template as follows;

<%@ 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>

The first time it is output it works fine. However the IDs clash after that, so the Select All checkbox no longer works.
I need the ID of the tbody element to be unique, and at the same time the jquery that implements the Select All functionality needs to know what the ID is.
So how do I do that?

Answer 1

Use CSS class names instead for your jQuery operations.