javascript - HeaderTemplate 中的 CheckBox 验证 ItemTemplate CheckBox

Question

问题:

如果用户选中了复选框，我将尝试验证下拉列表，如您在屏幕一中所见。

问题:

那么，如果用户选择了标题中的所有复选框，我该如何验证复选框呢？如您所见，屏幕二。如果我选中所有复选框，那么我希望启动验证，如屏幕一所示。

输出:

屏幕 1:

屏幕 2

//aspx

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
    OnRowDataBound="gv_RowDataBound">
    <Columns>
        <asp:BoundField DataField="ID" ControlStyle-Width="250px" HeaderText="ID" SortExpression="ID" />
        <asp:BoundField DataField="FirstName" ControlStyle-Width="250px" HeaderText="FirstName"
            SortExpression="FirstName" />
        <asp:BoundField DataField="LastName" ControlStyle-Width="250px" HeaderText="LastName"
            SortExpression="LastName" />
        <asp:TemplateField  HeaderText="Reject">
         <HeaderTemplate >
            Reject<br />
            <asp:CheckBox ID="checkboxall"  runat="server" />

              <asp:DropDownList ID="drpPaymentMethod_header" runat="server">
                    <asp:ListItem Value="-1">Please select reason</asp:ListItem>
                    <asp:ListItem Value="0">Month</asp:ListItem>
                    <asp:ListItem Value="1">At End</asp:ListItem>
                    <asp:ListItem Value="2">At Travel</asp:ListItem>
                </asp:DropDownList>

        </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="checkbox1" CssClass="selectreject"  runat="server" />
                <asp:DropDownList ID="drpPaymentMethod" runat="server">
                    <asp:ListItem Value="-1">Please select reason</asp:ListItem>
                    <asp:ListItem Value="0">Month</asp:ListItem>
                    <asp:ListItem Value="1">At End</asp:ListItem>
                    <asp:ListItem Value="2">At Travel</asp:ListItem>
                </asp:DropDownList>
                <asp:RequiredFieldValidator ID="rfv" InitialValue="-1" ControlToValidate="drpPaymentMethod" ForeColor="Red" SetFocusOnError="true"
                    Enabled="false" Display="dynamic" runat="server" ErrorMessage="Please select reason"></asp:RequiredFieldValidator>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Value">
            <ItemTemplate>
                <asp:TextBox ID="txt_Value" runat="server" Width="58px" Text="0"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

//cs

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
        { 
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                CheckBox checkbox1 = e.Row.FindControl("checkbox1") as CheckBox;
                RequiredFieldValidator rfv = e.Row.FindControl("rfv") as RequiredFieldValidator;
                DropDownList drpPaymentMethod = (DropDownList)e.Row.FindControl("drpPaymentMethod");
                // you can just pass "this" instead of "myDiv.ClientID" and get the ID from the DOM element
                checkbox1.Attributes.Add("onclick", "UpdateValidator('" + checkbox1.ClientID + "','" + drpPaymentMethod.ClientID + "','" + rfv.ClientID + "');");
                if (!checkbox1.Checked)
                    drpPaymentMethod.Attributes.Add("disabled", "disabled");
            }
            if (e.Row.RowType == DataControlRowType.Header)
            {
                CheckBox checkboxall = e.Row.FindControl("checkboxall") as CheckBox;
                //how to get the reference here ( rfv ?????????)
                //checkboxall.Attributes.Add("onclick", "UpdateValidatorAll('" + checkboxall.ClientID + "','" + drpPaymentMethod.ClientID + "','" + rfv.ClientID + "');");

            } 
        }

//js

$(document).ready(function () {

            var checkbox1 = "#<%=gv.ClientID%> input[id*='checkbox1']:checkbox";
            var checkboxall = $("input[id$='checkboxall']");

            $(checkboxall).click(function () {  
                if (checkboxall.is(':checked')) {
                    $('.selectreject > input').attr("checked", checkboxall.attr("checked"));   
                }
                else {
                    $('.selectreject > input').attr("checked", false); 
                }

            });

        }); 

        function UpdateValidator(chkID, drpID, validatorid) {

            //enabling the validator only if the checkbox is checked
            var enableValidator = $("#" + chkID).is(":checked");

            if (enableValidator)
                $('#' + drpID).removeAttr('disabled');
            else
                $('#' + drpID).attr('disabled', 'disabled');

            var vv = $('#' + validatorid).val();
            ValidatorEnable(document.getElementById(validatorid), enableValidator);
        }

        function UpdateValidatorAll(....) // i havent write the code for this function (select All checkbox)

Answer 1

试试这个:ASPX:

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
    OnRowDataBound="gv_RowDataBound">
    <Columns>
        <asp:BoundField DataField="ID" ControlStyle-Width="250px" HeaderText="ID" SortExpression="ID" />
        <asp:BoundField DataField="FirstName" ControlStyle-Width="250px" HeaderText="FirstName"
            SortExpression="FirstName" />
        <asp:BoundField DataField="LastName" ControlStyle-Width="250px" HeaderText="LastName"
            SortExpression="LastName" />
        <asp:TemplateField>
            <HeaderTemplate>
                Reject<br />
                <asp:CheckBox ID="checkboxall" runat="server" />
                <asp:DropDownList ID="drpPaymentMethod_header" runat="server">
                    <asp:ListItem Value="-1">Please select reason</asp:ListItem>
                    <asp:ListItem Value="0">Month</asp:ListItem>
                    <asp:ListItem Value="1">At End</asp:ListItem>
                    <asp:ListItem Value="2">At Travel</asp:ListItem>
                </asp:DropDownList>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="checkbox1" runat="server" />
                <asp:DropDownList ID="drpPaymentMethod" CssClass="gridDropDown" runat="server">
                    <asp:ListItem Value="-1">----</asp:ListItem>
                    <asp:ListItem Value="0">Month</asp:ListItem>
                    <asp:ListItem Value="1">At End</asp:ListItem>
                    <asp:ListItem Value="2">At Travel</asp:ListItem>
                </asp:DropDownList>
                <asp:RequiredFieldValidator ID="rfv" CssClass="gridRfv" InitialValue="-1" ControlToValidate="drpPaymentMethod"
                    Enabled="false" Display="Static" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Value">
            <ItemTemplate>
                <asp:TextBox ID="txt_Value" runat="server" Width="58px" Text="0"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text="Button" />

CS:

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            CheckBox checkbox1 = e.Row.FindControl("checkbox1") as CheckBox;
            RequiredFieldValidator rfv = e.Row.FindControl("rfv") as RequiredFieldValidator;
            DropDownList drpPaymentMethod = (DropDownList)e.Row.FindControl("drpPaymentMethod");
            // you can just pass "this" instead of "myDiv.ClientID" and get the ID from the DOM element
            checkbox1.Attributes.Add("onclick", "UpdateValidator('" + checkbox1.ClientID + "','" + drpPaymentMethod.ClientID + "','" + rfv.ClientID + "');");
            if (!checkbox1.Checked)
                drpPaymentMethod.Attributes.Add("disabled", "disabled");
        }

        if (e.Row.RowType == DataControlRowType.Header)
        {
            CheckBox checkboxall = e.Row.FindControl("checkboxall") as CheckBox;

            checkboxall.Attributes.Add("onclick", "UpdateValidatorAll('" + checkboxall.ClientID + "');");

        }
    }

JavaScript:

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function UpdateValidator(chkID, drpID, validatorid) {
        //enabling the validator only if the checkbox is checked
        var enableValidator = $("#" + chkID).is(":checked");

        if (enableValidator)
            $('#' + drpID).removeAttr('disabled');
        else
            $('#' + drpID).attr('disabled', 'disabled');

        var vv = $('#' + validatorid).val();

        ValidatorEnable(document.getElementById(validatorid), enableValidator);
    }

    function UpdateValidatorAll(chkID) {
        //enabling the validator only if the checkbox is checked
        var enableValidator = !$("#" + chkID).is(":checked");

        $('.gridDropDown').each(function (index) {
            if (enableValidator)
                $(this).removeAttr('disabled');
            else
                $(this).attr('disabled', 'disabled');
        });

        $('.gridRfv').each(function (index) {
            var cont = $(this).get();
            ValidatorEnable(cont[0], enableValidator);

        });

    }
</script>