A Problem With Disabled Controls...

In certain scenarios you may want to disable controls on the client-side based on some user action. But disabled controls' values are not posted back, as we saw in the ReadOnlyVsDisabled demo. This demo illustrates such a problem... To illustrate this problem, start by clicking the "Save" button. This will show the TextBox values after postback. Now, change some textbox values and click the "Save" button. Things still behave as expected. Finally, change some textbox values, check "Lock", and click the "Save" button. You'll see that the TextBox values revert to their initial values. This is because the changed values are not passed back on postback (since the controls are disabled) and therefore the declarative Text property values are used instead.

Name:
Street:
City:
Lock

Source Code

<script language="vb" runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        If Not Page.IsPostBack Then
            'Add client-side script to call toggleInputElementsDisabledStatus when CheckBox (or label) is clicked
            LockValues.Attributes("onclick") = String.Format("toggleInputElementsDisabledStatus('{0}');toggleInputElementsDisabledStatus('{1}');toggleInputElementsDisabledStatus('{2}');", _
                            Name.ClientID, Street.ClientID, City.ClientID)
        End If

        'When visiting the page, the TextBox controls are initially enabled. See if we
        'need to toggle them (making them disabled)
        If LockValues.Checked Then
            Page.RegisterStartupScript("makeTBsDisabled", _
                        String.Format("<script>toggleInputElementsDisabledStatus('{0}');toggleInputElementsDisabledStatus('{1}');toggleInputElementsDisabledStatus('{2}');</" & "script>", _
                            Name.ClientID, Street.ClientID, City.ClientID))
        End If
    End Sub

    Protected Sub SaveAddress_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ResultsPanel.Visible = True     'show the results panel

        TextBoxValues.Text = "<ul><li>Name: " & Name.Text & "</li><li>Street: " & Street.Text & _
                    "</li><li>City: " & City.Text & "</li></ul>"
    End Sub

</script>

<html>
<head>
    <script language="javascript">
        function toggleInputElementsDisabledStatus(id)
        {
            // client-side script that toggles the specified input control's
            // disabled status
            var elem = document.getElementById(id);
            if (elem != null)
            {
                // toggle the disabled status
                elem.disabled = !elem.disabled;
            }
        }
    </script>
</head>

<form id="form1" runat="server">
    <table>
        <tr>
            <td align="right">
                Name:</td>
            <td>
                <asp:TextBox Text="Scott Mitchell" ID="Name" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td align="right">
                Street:</td>
            <td>
                <asp:TextBox Text="123 Elm Street" ID="Street" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td align="right">
                City:</td>
            <td>
                <asp:TextBox Text="Anywhere, USA" ID="City" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td align="right" colspan="2">
                <asp:CheckBox ID="LockValues" runat="server" /> Lock</td>
        </tr>
    </table>
    <p>
        <asp:Button ID="SaveAddress" runat="server" Text="Save Address Information" OnClick="SaveAddress_Click" /> </p>
    <p>
    <asp:Panel ID="ResultsPanel" runat="server" Visible="False">
        <h2>
            Results:</h2>
        <p>
            Value of TextBoxes after postback:</p>
        <p>
            <asp:Label ID="TextBoxValues" runat="server"></asp:Label> </p>
    </asp:Panel>
    </p>
</form>

[Return to the article...]