Question

I have a checkbox that disables 2 textboxes when checked. When it is unchecked it enables the checkboxes. Here is the JavaScript:

function enableField() {
    prePracticeCodeTextBox = document.getElementById('prePracticeCodeTextBox');
    preContactTextBox = document.getElementById('preContactTextBox');
    checkTheBox = document.getElementById('CheckBox1');
    if (checkTheBox.checked == true) {
        prePracticeCodeTextBox.disabled = false;
        preContactTextBox.disabled = false;

    }
    else {
        prePracticeCodeTextBox.disabled = true;
        preContactTextBox.disabled = true;
    }
}

Here is the HTML:

<dl>
    <dt><label for="CheckBox1">PreAnalytical?</label></dt>
    <dd> <asp:CheckBox ID="CheckBox1" runat="server" CausesValidation="false"
                            Visible="true" OnCheckChanged="enableField()"/></dd>
</dl>
<dl>
    <dt><label for="prePracticeCodeTextBox">Practice Code:</label></dt>
    <dd><asp:TextBox ID="prePracticeCodeTextBox" runat="server" Enabled="False" /></dd>
</dl>
<dl>
    <dt><label for="preContactTextBox">Contact:</label></dt>
    <dd><asp:TextBox ID="preContactTextBox" runat="server" Enabled="False" /></dd>
</dl>

The JavaScript function is not being called at all.

What am I doing wrong?

Answer 1

Try to use onclick instead. Use the following code to register it on your code behind :

CheckBox1.Attributes.Add("onclick", "enableField();");

BTW, you won’t be able to reach the elements as you do on asp.net web forms application with default settings. You need to get the ClientIDs of the elements which will be rendered :

function enableField() {
    prePracticeCodeTextBox = document.getElementById('<%=prePracticeCodeTextBox.ClientID%>');
    preContactTextBox = document.getElementById('<%=preContactTextBox.ClientID%>');
    checkTheBox = document.getElementById('<%=CheckBox1.ClientID%>');
    if (checkTheBox.checked == true) {
        prePracticeCodeTextBox.disabled = false;
        preContactTextBox.disabled = false;

    }
    else {
        prePracticeCodeTextBox.disabled = true;
        preContactTextBox.disabled = true;
    }


}

If you are developing on .net 4, read the below article :

http://www.tugberkugurlu.com/archive/we-lovenet-4-clean-web-control-ids-with-clientidmode-property-to-static-and-predictable