Cycle through controls in UpdatePanel, and access javascript

Question

I'm trying to update all TextBoxes on my page to convert them to labels like so:

foreach (Control ctrl in masterform.Controls)
{
    if (ctrl.GetType() == typeof(TextBox))
    {
        TextBox t = ctrl as TextBox;
        t.ReadOnly = true;
        t.BackColor = transparent;
        t.BorderWidth = 0;
    }
}

Unfortunately, I encompassed all of the text boxes with an update panel and can no longer access them. So I have tried this:

foreach (Control ctrl in masterform.Controls)
{
    if (ctrl is UpdatePanel)
    {
        UpdatePanel s = ctrl as UpdatePanel;
        if (s == PartPanel)
        {
            foreach (Control ctrl2 in s.Controls)
            {
                if (ctrl2 is TextBox)
                {
                    TextBox t = ctrl2 as TextBox;
                    t.ReadOnly = true;
                    t.BackColor = transparent;
                    t.BorderWidth = 0;
                }
            }
        }
    }
}

This just shows the panels control count as 1 yet there are a good number of textbox controls inside. Any help would be appreciated.

Also, i have mutually exclusive checkboxes that work like so: If #1 is checked, #2 or #3 cannot be checked and like wise, if #2 or #3 is checked, #1 cannot be checked. So that means, if #2 and/or #3 is checked and the user checks #1, #2 and #3 become unchecked and if #1 is checked and the user checks #2 and/or #3, #1 becomes unchecked. I have wrote the following function to handle that and it works so long as the update panel does not update:

var objChkd;
$(document).ready(function() 
{
    $('.mutuallyexclusive1').click(function () 
    {
        checkedState = $(this).attr('checked');
        $('.mutuallyexclusive2:checked').each(function () 
        {
            $(this).attr('checked', false);
        });
        $(this).attr('checked', checkedState);
    });
    $('.mutuallyexclusive2').click(function () 
    {
        checkedState = $(this).attr('checked');
        $('.mutuallyexclusive1:checked').each(function () 
        {
            $(this).attr('checked', false);
        });
        $(this).attr('checked', checkedState);
    });
});  

<input id="Chk1" type="checkbox" runat="server" class="mutuallyexclusive1" /><br />
<input id="Chk2" type="checkbox"  runat="server" class="mutuallyexclusive2" /><br />
<input id="Chk3" type="checkbox" runat="server" class="mutuallyexclusive2" /><br />

The problem is that when the page is loaded, they work fine but if an update panel's update() function is called, they seem to lose the connection to the javascript they are supposed to call. Again, any help would be appreciated. Thanks.

Answer 1

For your UpdatePanel, try this to recursively find your textboxes and update them:

void DisableTextBoxes(Control parent)
{
    foreach (Control ctrl in parent.Controls)
    {
        TextBox t = ctrl as TextBox;
        if (t != null)
        {
            t.ReadOnly = true;
            t.BackColor = transparent;
            t.BorderWidth = 0;
        }
        else
        {
            DisableTextBoxes(ctrl);
        }
    }
}

DisableTextBoxes(masterform);

For the checkboxes, your script is executed at the page load and the event handlers are bound to the controls at this moment. If the checkboxes are part of the DOM updated without a complete page reload during the UpdatePanel refresh, the event handlers are not bound to them anymore (they are new elements). You will need to bind the events again after a partial refresh of the page.