限制CheckBoxList控件只能单选

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

哈哈,看看Insus.NET做出来的效果:

 

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

TerrestrialBranch.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for TerrestrialBranch
/// </summary>
namespace Insus.NET
{
    public class TerrestrialBranch
    {
        private int _ID;
        private string _Name;

        public int ID
        { 
            get{return _ID;}
            set { _ID = value; }
        }

        public string Name
        {
            get { return _Name; }
            set { _Name = value; }
        }
        
        
        public TerrestrialBranch()
        {
            //
            // TODO: Add constructor logic here
            //
        }

        public TerrestrialBranch(int id, string name)
        {
            this.ID = id;
            this._Name = name;
        }
    }
}


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

View Code
 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;
    }


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

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


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

View Code
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>之内。

View Code
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 @ 2013-01-22 21:56  Insus.NET  阅读(...)  评论(...编辑  收藏