javascript - Disable textboxes on check changed - Stack Overflow

admin管理员组

文章数量:1321037

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?

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?

• javascript
• asp
• html

Share Improve this question Follow edited Oct 10, 2014 at 19:50 DanM7 2,24633 gold badges2929 silver badges4747 bronze badges asked Sep 22, 2011 at 21:54 Alex GordonAlex Gordon 60.9k304304 gold badges703703 silver badges1.1k1.1k bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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 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 4, read the below article :

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

Change OnCheckChanged="enableField() to onclick="enableField();". You are using server controls. OnCheckChanged is an event for the asp CheckBox control.

function enableField() {

prePracticeCodeTextBox =.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;
}

}

本文标签： javascriptDisable textboxes on check changedStack Overflow