MVC: JQuery onchange event in an EditorTemplate

I have a grid with 2 checkboxes. When I check one, I want the other to be unchecked. This can be done in JQuery, but I am not clear how. To make this work I need to know the row index of where the checkbox is clicked. So the Editor Template looks like;

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

        <tr>
            <td style="width:100px">
                <%: string.Format("{0} {1}", Model.Forename, Model.Surname)  %>
            </td>
            <td style="width:开发者_Go百科125px">
                <%: String.Format("{0:ddd, MMM d, yyyy}", Model.RequestDate) %>
            </td>
            <td style="width:70px">
                <%: Model.Type %>
            </td>
            <td style="width:125px">
                <%: String.Format("{0:ddd, MMM d, yyyy}", Model.AnnualLeaveDate) %>
            </td>
            <td style="width:60px">
                <%: Html.CheckBoxFor(model => model.ApproveFlag) %>
            </td>
            <td style="width:55px">
                <%: Html.CheckBoxFor(model => model.RejectFlag) %>
            </td>
            <td style="width:230px">
                <%: Html.TextAreaFor(model => model.Reason) %>
            </td>
        </tr>

And the page source looks like (first 2 rows of many). You can see the index of the for within the id and name of the element;

<table class="StripeGrid">


    <tr>
        <td style="width:100px">
            xaviar caviar
        </td>
        <td style="width:125px">

            Mon, Nov 29, 2010
        </td>
        <td style="width:70px">
            Request
        </td>
        <td style="width:125px">
            Mon, Feb 1, 2010
        </td>
        <td style="width:60px">
            <input id="RequestList_0__ApproveFlag" name="RequestList[0].ApproveFlag" type="checkbox" value="true" /><input name="RequestList[0].ApproveFlag" type="hidden" value="false" />

        </td>
        <td style="width:55px">
            <input id="RequestList_0__RejectFlag" name="RequestList[0].RejectFlag" type="checkbox" value="true" /><input name="RequestList[0].RejectFlag" type="hidden" value="false" />
        </td>
        <td style="width:230px">
            <textarea cols="20" id="RequestList_0__Reason" name="RequestList[0].Reason" rows="2">&#13;&#10;</textarea>
        </td>
    </tr>

    <tr>
        <td style="width:100px">
            xaviar caviar
        </td>
        <td style="width:125px">
            Wed, Dec 8, 2010
        </td>
        <td style="width:70px">
            Request
        </td>

        <td style="width:125px">
            Tue, Nov 2, 2010
        </td>
        <td style="width:60px">
            <input id="RequestList_1__ApproveFlag" name="RequestList[1].ApproveFlag" type="checkbox" value="true" /><input name="RequestList[1].ApproveFlag" type="hidden" value="false" />
        </td>
        <td style="width:55px">
            <input id="RequestList_1__RejectFlag" name="RequestList[1].RejectFlag" type="checkbox" value="true" /><input name="RequestList[1].RejectFlag" type="hidden" value="false" />
        </td>

        <td style="width:230px">
            <textarea cols="20" id="RequestList_1__Reason" name="RequestList[1].Reason" rows="2">&#13;&#10;</textarea>
        </td>
    </tr>

. . .

This event should bind to all checkboxes in your table, when a checkbox is clicked it will find the closest tr, then find the checkbox that is not the one that was just clicked and uncheck it.

$(".StripeGrid tr input:checkbox").click(function(){
    $(this).closest("tr").find("input:checkbox:not(#" + $(this).attr("id") + ")").attr("checked", false);
});

That said... maybe you should just use radio buttons