none
JavaScript对复选框全选的不足!如何处理。。 RRS feed

  • 问题

  • 我要对记录数据进行批量处理,所以在datagrid中内嵌了一个模板列,内置一个复选框,在页眉放了一个html的复选框,用作全选操作,但是现在一个问题来了,有些记录用户操作以后,是不能再进行修改的,所以,我会把复选框灰掉,当我点击全选那个时,连灰掉也选中了,这样很不好,虽然没有修改到数据。怎么让灰掉的复选框不被选中?我的全选操作时从网上下载的JavaScript比较简单的。

    ==========我自己改了一段,但是没有达到效果,,我就加了一个判断条件e.disabled == 'disabled',e.disabled == 'false',都不行啊,是我哪里的问题。那些灰掉复选框还是可以选中,郁闷。


    function check_all() {
        var frm = document.Form1;
        for (var i = 0; i < frm.elements.length; i++) {
            var e = frm.elements[i];
            if ((e.name != 'allbox') && (e.type == 'checkbox')) {
                e.checked = frm.allbox.checked;
                if ((frm.allbox.checked) && (e.disabled == 'disabled')) {
                    hL(e);
                }             else {
                    dL(e);
                }       

    }

      }

    }

    2010年3月25日 3:52

答案

  • 你好!

    我写了个示示例,方法可能会和你的不同。方法是在服务记录未被禁用的 checkBox。全选时只对这部分 checkBox 操作。

     

    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Import Namespace="System.Data" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Id", typeof(int));
            dt.Columns.Add("Name", typeof(string));
            
            dt.PrimaryKey = new DataColumn[] { dt.Columns["Id"] };
    
            dt.Rows.Add(new object[] { 1, "Sam"});
            dt.Rows.Add(new object[] { 2, "XXY" });
            dt.Rows.Add(new object[] { 3, "John" });
            dt.Rows.Add(new object[] { 4, "Meliy" });
            dt.Rows.Add(new object[] { 5, "Tom" });
    
            this.GridView1.DataSource = dt;
            this.GridView1.DataBind();
        }
    
        string javascriptArray = string.Empty;
        
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                CheckBox checkBox = e.Row.FindControl("checkBox1") as CheckBox;
                checkBox.Attributes["onclick"] = "SetAllItemCheckedState(this);";
            }
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                CheckBox checkBox = e.Row.FindControl("checkBox1") as CheckBox;
                
                if (checkBox == null)
                    return;
    
                if (e.Row.RowIndex % 2 == 0)
                {
                    // rowIndex 为偶数时禁用 checkBox
                    checkBox.Enabled = false;
                }
                else
                {
                    // 将未禁用的 checkbox 控件 id 保存到数组中在 js 中使用。
                    if (javascriptArray != string.Empty)
                        javascriptArray += ", ";
    
                    javascriptArray += string.Format("'{0}'", checkBox.ClientID);
                }
            }
        }
    
        protected void GridView1_DataBound(object sender, EventArgs e)
        {
            string fullJavascriptArray = string.Format("var javascriptArray = new Array({0});", javascriptArray);
            string demoJavascript = @"
    // 全选所有 CheckBox        
    function SetAllItemCheckedState(e){
        var checked = e.checked;
        for(var i in javascriptArray)
            document.getElementById(javascriptArray[i]).checked = checked;
    }";
    
            this.ClientScript.RegisterStartupScript(this.GetType(), "defined", fullJavascriptArray, true);
            this.ClientScript.RegisterStartupScript(this.GetType(), "demo", demoJavascript, true);
        }
    
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>GridView Javascript 全选未被禁用的 CheckBox</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            onrowdatabound="GridView1_RowDataBound" ondatabound="GridView1_DataBound">
            <Columns>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:CheckBox ID="checkBox1" runat="server" />
                    </ItemTemplate>
                    <HeaderTemplate>
                        <asp:CheckBox ID="checkBox1" runat="server" />
                    </HeaderTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="Id" HeaderText="Id"  />
                <asp:BoundField DataField="Name" HeaderText="Name"  />
            </Columns>
        </asp:GridView>
        </form>
    </body>
    </html>

     


    知识改变命运,奋斗成就人生!
    2010年3月26日 4:57
    版主