enable textbox with checkbox checked with javascript

Question

HEllo - I am trying to enable/disable textbox when checkbox is checked (enable) or unchecked (disable). WIth the piece of code i have nothing is happening once the checkbox is checked/unchecked. Here is what I have:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AssociationInfo.ascx.cs" Inherits="Administration.Modules.AssociationInfo" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
     <script type="text/javascript" language="javascript">
        function enableTextBox() {
            window.onload = function () {
                var check = document.getElementById("chkAssociation");
                check.onchange = function () {
                    if (this.checked == true)
                        document.getElementById("txtAddress").disabled = false;
                    else
                        document.getElementById("txtAddress").disabled = true;
                };
            };
        }
    </script>

    <div>
    <h2>Association Info</h2>
    <br />

      <asp:CheckBox Checked="false" ID="chkAssociation" runat="server" />&nbsp;&nbsp;
       <asp:TextBox ID="txtAddress" Text="Test" runat="server" />
    </div>

The code is in web user control. Could that be reason why is not working correctly?

Thanks for helping

Thanks everyone for the help in advance, Laziale

KV Prajapati · Accepted Answer · 2011-01-20 15:35:36Z

4

Please turn of AutoPostBack.

<asp:CheckBox Checked="false" 
              OnChange="javascript:enableTextBox();" 
              ID="chkAssociation" 
              runat="server" />

EDIT: Try this code,

<script type="text/javascript">
        window.onload = function() {
            var check = document.getElementById("<%=chkAssociation.ClientID %>");
            check.onchange = function() {
                if (this.checked == true)
                    document.getElementById("<%=txtAddress.ClientID %>").disabled = false;
                else
                    document.getElementById("<%=txtAddress.ClientID %>").disabled = true;
            };
        };
</script>        

<asp:CheckBox  Checked="false"   ID="chkAssociation" runat="server" />
<asp:TextBox ID="txtAddress" Enabled="false" Text="Test" runat="server" />

edited Jan 20, 2011 at 15:35

answered Jan 20, 2011 at 13:51

KV Prajapati

94.8k20 gold badges151 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Laziale Over a year ago

firefox. But I tried also IE and Chrome, with the solution you proposed and still nothing is happening.The code is in web user control not in .aspx page.

KV Prajapati Over a year ago

Have a look at post. I've changed.

Joe Enos · Accepted Answer · 2011-01-20 15:41:07Z

2

Try "onclick" instead of "onchange" - I believe that's what you're looking for.

answered Jan 20, 2011 at 15:41

Joe Enos

40.6k11 gold badges86 silver badges144 bronze badges

4 Comments

Laziale Over a year ago

Thanks Joe, but still nothing is happening. I am having the code in web user control, I don't know if that can be one of the reasons. However, I edited my code above with the complete web user control, if you guys can see some mistake. Thanks for helping

Joe Enos Over a year ago

Inside a user control, the ID of the rendered control is not the same as the ID you give it. Take a look at the "view source" in your browser, and you'll see your txtAddress is now named something like "ctrl_00_txtAddress" or something like that. You'll need to do what adatapost did in his answer, wrapping the call in a <%=txtAddress.ClientID %> block, to make the javascript work.

Joe Enos Over a year ago

By the way, the same holds true for master pages, which most sites these days are using - so it's always a good idea to use the "ClientID" syntax every time you reference a server control using javascript.

Laziale Over a year ago

Thanks. I don't know if I can select both of your answers for correct, but both of you helped me. Have a nice day

Prince Antony G · Accepted Answer · 2011-12-14 05:42:30Z

Check this

1.If Checkbox is Checked then the Textbox be Disable

<script type="text/javascript">
function enableDisable(bEnable, textBoxID)
{
     document.getElementById(textBoxID).disabled = bEnable

}
</script>


 <asp:TextBox ID="t1" Text="" runat="server" />
<asp:CheckBox ID="chk1" Checked="false" onclick="enableDisable(this.checked, 't1');" runat="server" />

2.If Checkbox is Checked then the Textbox be Enable

 <script type="text/javascript">
function enableDisable(bEnable, textBoxID)
{
     document.getElementById(textBoxID).disabled = !bEnable

}
</script>
        <asp:TextBox ID="t1" Text="" runat="server" />
        <asp:CheckBox ID="chk1" Checked="true" onclick="enableDisable(this.checked, 't1');" runat="server" />

Collectives™ on Stack Overflow

enable textbox with checkbox checked with javascript

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related