限制CheckBoxList控件只能單選
標(biāo)簽：
JavaScript
开发要求，原本对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; } } } } } }
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦