Question

我有一个带有2个复选框的网格。当我检查一个时，我想要另一个未经检查。这可以在JQuery中完成，但我不清楚如何。为了完成这项工作，我需要知道单击复选框的行索引。所以编辑模板看起来像;

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

页面源看起来像（前两行很多）。您可以在元素的id和名称中看到for的索引;

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

。。

Answer 1

此事件应该绑定到表中的所有复选框，当单击一个复选框时，它将找到最接近的tr，然后找到不是刚刚单击的复选框并取消选中它。

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

那说......也许你应该只使用单选按钮

MVC：EditorTemplate中的JQuery onchange事件

1 个答案: