最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Disable textboxes on check changed - Stack Overflow

programmeradmin2浏览0评论

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?

Share Improve this question edited Oct 10, 2014 at 19:50 DanM7 2,2463 gold badges29 silver badges47 bronze badges asked Sep 22, 2011 at 21:54 Alex GordonAlex Gordon 60.9k304 gold badges703 silver badges1.1k bronze badges
Add a ment  | 

3 Answers 3

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;
}

}

发布评论

评论列表(0)

  1. 暂无评论