How do I get the ID or reference of the listview row I am clicking a checkbox in?

Question

I have an ASP.NET 2.0 ListView control (aka:parent) and configured inside this ListView I have another ListView (aka:child). For each row the parent has there is potentially a child ListView control which can have 1-3 rows. Each row has two checkboxes (a select checkbox and a deny checkbox).

I need to process these checkboxes in JavaScript so that if one select is chosen on any of the rows all other select checkboxes are unchecked AND the deny checkbox for that row only is unchecked. The rows which were NOT selected CAN have the deny checkboxes checked.

What is the best approach to this?

Answer 1

I did my best to understand how the markup would be from your description, but basically I built multiple divs containing a set of checkbox inputs (ignore the poor markup).

<div>
    <form>
        <label>Yes</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>No</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>Maybe</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
    </form>
</div>
<div>
    <form>
        <label>Yes</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>No</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>Maybe</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
    </form>
</div>

From here I started by using jQuery (very easy to use but up to you to figure out how to set up).

$('input').change(function(){
    if($(this).attr('checked')) {
        $(this).parent().find('input').attr('checked', false);
        $(this).attr('checked', true);
    }
});

This script listens for a change event on all check boxes and then runs a check based on the parent it is contained in. If this check-box is checked, un-check all the other check-boxes contained within that parent.

You can make this more specific inside your if statement or create an else if statement for other specific use cases.

if( check-box is checked and doesnt have class name ABC ) { 
    //do normal stuff above 
} else if( specific check-box with class name of ABC is checked ) { 
    //do something else 
}

Answer 2

I think You can use the MutuallyExclusiveCheckboxExtender from the AjaxControlToolkit to do what you want. Here is a rough implementation of what you have described:

<asp:ListView ID="parentListView" runat="server" ItemPlaceholderID="PlaceHolder1">
    <LayoutTemplate>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </LayoutTemplate>
    <ItemTemplate>
        <asp:Label ID="lblFieldSet" runat="server" Text='<%# Eval("SetName") %>' />
        <br />
        <asp:ListView ID="childListView" runat="server" DataSource='<%# Eval("Items") %>'
            ItemPlaceholderID="PlaceHolder2">
            <LayoutTemplate>
                <asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder>
            </LayoutTemplate>
            <ItemTemplate>
                <div>
                    <asp:Label ID="lblItemName" runat="server" Text='<%# Eval("ItemName") %>' />
                    <br />
                    <asp:CheckBox ID="cbSelect" runat="server" Text="Select" />
                    <asp:CheckBox ID="cbDeny" runat="server" Text="Deny" />
                    <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="exclusiveCheckboxExtender" runat="server"
                        TargetControlID="cbSelect" Key="Select" />
                </div>
            </ItemTemplate>
        </asp:ListView>
    </ItemTemplate>
</asp:ListView>

Notice the use of the extender. It will effectively only allow one "Select" checkbox to be checked at any point and time. I don't think this is exactly what you want, but you should be able to adapt it to suit your needs.