限制CheckBoxList控件只能单选

最新推荐文章于 2022-07-29 16:09:15 发布

kissdeath

最新推荐文章于 2022-07-29 16:09:15 发布

阅读量9.4k

点赞数 1

分类专栏：学习园地编程交流文章标签： javascript 控件

编程交流同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

学习园地

23 篇文章 0 订阅

订阅专栏

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

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

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

 
    
  
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>来存储这十二个对象：

 
    
  
 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"

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

kissdeath

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
限制CheckBoxList控件只能单选

限制CheckBoxList控件只能单选开发要求，原本对CheckBoxList控件是用来让用户多选的。但现在特殊要求，这个CheckBoxList控件限制只能单选。哈哈，看看Insus.NET做出来的效果：为了你也能实现出来，可以参考下面的方法，第一是准备好一个对象“地支”（Terrestrial Branch）TerrestrialBranch.c
复制链接

扫一扫