Question

I have a ListView that contains 3 checkboxes per row. I want to set it up so that only one checkbox can be selected at a time. Here is my current CodeBehind…

Public Class MyClass

    Dim Checkbox1 As Checkbox
    Dim Checkbox2 As Checkbox
    Dim Checkbox3 As Checkbox

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        InitializeDisplay()

        If Not IsPostBack Then
           UpdateDisplay()
        End If

    End Sub

    Protected Sub UpdateDisplay()

        Dim Table As DataTable
        Table = GetDataTable()

        ListView.DataSource = Table
        ListView.DataBind()  

    End Sub

    Private Sub ListView_ItemDataBound( sender, e ) Handles ListView.ItemDataBound

        Dim item As ListViewItem = e.Item

        Checkbox1 = item.FindControl("Checkbox1")
        Checkbox2 = item.FindControl("Checkbox2")
        Checkbox3 = item.FindControl("Checkbox3")

    End Sub

    Public Sub CheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)

        Dim Checkbox2 As CheckBox = TryCast(sender, CheckBox)
        Dim Checkbox3 As CheckBox = TryCast(sender, CheckBox)

        Checkbox2.Checked = False
        Checkbox3.Checked = False        

    End Sub

    Public Sub CheckBox2_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)

        Dim Checkbox1 As CheckBox = TryCast(sender, CheckBox)
        Dim Checkbox3 As CheckBox = TryCast(sender, CheckBox)

        Checkbox1.Checked = False
        Checkbox3.Checked = False        

    End Sub

    Public Sub CheckBox3_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)

        Dim Checkbox1 As CheckBox = TryCast(sender, CheckBox)
        Dim Checkbox2 As CheckBox = TryCast(sender, CheckBox)

        Checkbox1.Checked = False
        Checkbox2.Checked = False        

    End Sub

End Class

Actual WebForm ItemTemplate from the ListView

<ItemTemplate>
<asp:Checkbox ID="CheckBox1" OnCheckedChanged="CheckBox1_CheckedChanged" runat="server" />
<asp:Checkbox ID="CheckBox2" OnCheckedChanged="CheckBox2_CheckedChanged" runat="server" />
<asp:Checkbox ID="CheckBox3" OnCheckedChanged="CheckBox3_CheckedChanged" runat="server" />
</ItemTemplate>

Let me know if I need to include anything else. Right now when I click a checkbox and another checkbox is selected then both are selected instead of just the new one… Any ideas? Thanks!

Answer 1

You need to set AutoPostBack=”true” on each checkbox (Doco here). Otherwise, your server side code will never run until a postback is triggered in some other way.

I would personally prefer to use jQuery to do it, to avoid a round-trip to the server. To do this, try something like

$(document).ready(function(){
   $("input[type=checkbox]").click(function(eventData){
        var checked = $(eventData.currentTarget).prop("checked");
        if(checked === "checked"){
             $("input[type=checkbox]").prop("checked", false);//uncheck everything.
             $(eventData.currentTarget).prop("checked", "checked");//recheck this one. 
        }
   });
});