Restrict CheckBoxList controls to only select implementation code and demo animation _ Practical Tips

Development requirements, originally for the CheckBoxList control is used to allow users to select multiple. But now special requirements, this CheckBoxList control limit can only be radio.

Haha, look at the effect of doing it:

In order to you can also be achieved, you can refer to the following methods, the first is to prepare an object "earthly" (Terrestrial Branch)
TerrestrialBranch.cs

Copy Code code as follows:

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

Populate this object with data and store the 12 objects with a generic list<t>:

Copy Code code as follows:

Private list<terrestrialbranch> GetData ()
{
list<terrestrialbranch> TBS = new list<terrestrialbranch> ();
Tbs. ADD (New Terrestrialbranch (1, "Zi"));
Tbs. ADD (New Terrestrialbranch (2, "ugly"));
Tbs. ADD (New Terrestrialbranch (3, "Yin"));
Tbs. ADD (New Terrestrialbranch (4, "Mao"));
Tbs. ADD (New Terrestrialbranch (5, "Chen"));
Tbs. ADD (New Terrestrialbranch (6, "Si"));
Tbs. ADD (New Terrestrialbranch (7, "Afternoon"));
Tbs. ADD (New Terrestrialbranch (8, "not"));
Tbs. ADD (New Terrestrialbranch (9, "Shen"));
Tbs. ADD (New Terrestrialbranch (10, "unitary"));
Tbs. ADD (New Terrestrialbranch (11, "Xu"));
Tbs. ADD (New Terrestrialbranch (12, "Hai"));
return TBS;
}

Pull a CheckBoxList control on the. aspx page, set two properties repeatcolumns= "6" repeatdirection= "Horizontal"

Copy Code code as follows:

<asp:checkboxlist id= "Checkboxlistterrestrialbranch" runat= "Server" repeatcolumns= "6" repeatdirection= " Horizontal "></asp:CheckBoxList>

Bind the list<terrestrialbranch> that you just prepared to this CheckBoxList control:

Copy Code code as follows:

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, everything is ready, you can write JavaScript script and put it inside

Copy Code code as follows:

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 = funct Ion () {
var CBS = inputs;
for (var i = 0; i < cbs.length i++) {
if (Cbs[i].type = "checkbox" && Cbs[i]!= this && thi s.checked) {
cbs[i].checked = false;
}
}
}
}
}
}