限制CheckBoxList控件只能单选

转摘：http://www.cnblogs.com/insus/archive/2013/01/22/2872203.html

开发要求，原本对CheckBoxList控件是用来让用户多选的。但现在特殊要求，这个CheckBoxList控件限制只能单选。

哈哈，看看Insus.NET做出来的效果：

 

为了你也能实现出来，可以参考下面的方法，第一是准备好一个对象“地支”（Terrestrial Branch）

 1 TerrestrialBranch.cs
 2 
 3 using System;
 4 using System.Collections.Generic;
 5 using System.Linq;
 6 using System.Web;
 7 
 8 /// <summary>
 9 /// Summary description for TerrestrialBranch
10 /// </summary>
11 namespace Insus.NET
12 {
13     public class TerrestrialBranch
14     {
15         private int _ID;
16         private string _Name;
17 
18         public int ID
19         { 
20             get{return _ID;}
21             set { _ID = value; }
22         }
23 
24         public string Name
25         {
26             get { return _Name; }
27             set { _Name = value; }
28         }
29         
30         
31         public TerrestrialBranch()
32         {
33             //
34             // TODO: Add constructor logic here
35             //
36         }
37 
38         public TerrestrialBranch(int id, string name)
39         {
40             this.ID = id;
41             this._Name = name;
42         }
43     }
44 }

用数据填充这个对象，并用泛型List<t>来存储这十二个对象：

private List<TerrestrialBranch> GetData()
    {
        List<TerrestrialBranch> tbs = new List<TerrestrialBranch>();
        tbs.Add(new TerrestrialBranch(1,"子"));
        tbs.Add(new TerrestrialBranch(2, "丑"));
        tbs.Add(new TerrestrialBranch(3, "寅"));
        tbs.Add(new TerrestrialBranch(4, "卯"));
        tbs.Add(new TerrestrialBranch(5, "辰"));
        tbs.Add(new TerrestrialBranch(6, "巳"));
        tbs.Add(new TerrestrialBranch(7, "午"));
        tbs.Add(new TerrestrialBranch(8, "未"));
        tbs.Add(new TerrestrialBranch(9, "申"));
        tbs.Add(new TerrestrialBranch(10, "酉"));
        tbs.Add(new TerrestrialBranch(11, "戌"));
        tbs.Add(new TerrestrialBranch(12, "亥"));
        return tbs;
    }
View Code

在.aspx页面拉一个CheckBoxList控件，设置两个属性RepeatColumns="6" RepeatDirection="Horizontal"

<asp:CheckBoxList ID="CheckBoxListTerrestrialBranch" runat="server" RepeatColumns="6" RepeatDirection="Horizontal"></asp:CheckBoxList>

把刚才准备好的List<TerrestrialBranch>绑定给这个CheckBoxList控件：

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.OleDb;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Insus.NET;

public partial class _Default : System.Web.UI.Page
{       
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            Data_Binding();
    }

    private void Data_Binding()
    {
        this.CheckBoxListTerrestrialBranch.DataSource = GetData();
        this.CheckBoxListTerrestrialBranch.DataTextField = "Name";
        this.CheckBoxListTerrestrialBranch.DataValueField = "ID";
        this.CheckBoxListTerrestrialBranch.DataBind();
    }
}

OK,一切准备就绪，可以写Javascript脚本，放在<head>之内。

window.onload = function () {
            var cbl = document.getElementById('<%= CheckBoxListTerrestrialBranch.ClientID %>')
            var inputs = cbl.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "checkbox") {
                    inputs[i].onclick = function () {                                          
                        var cbs = inputs;
                        for (var i = 0; i < cbs.length; i++) {
                            if (cbs[i].type == "checkbox" && cbs[i] != this && this.checked) {
                                cbs[i].checked = false;
                            }
                        }
                    }
                }
            }
        }

 

posted on 2015-07-09 14:39  NKing  阅读(373)  评论(0)  编辑  收藏  举报

导航