Enable Disable TextBox using Checkbox event

Question

_{Saturday, August 30, 2014 3:23 AM}

I want to enable textbox in my webpage to be visible with the select/deselect of checkbox using ajax control.

All replies (7)

_{Saturday, August 30, 2014 9:28 AM ✅Answered}

I want the same through UpdatePanel.

You need to wrap your control inside an updatepanel and then you need to set the Trigger for your checkbox checkedChanged event like given below

Sample:

 <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
            <asp:TextBox ID="TextBox1" runat="server" Visible="False"></asp:TextBox>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="CheckBox1" EventName="CheckedChanged" />
        </Triggers>
    </asp:UpdatePanel>

C#:

 protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
        {
            if (CheckBox1.Checked)
                TextBox1.Visible = true;
            else
                TextBox1.Visible = false;
        }

_{Saturday, August 30, 2014 3:31 AM}

What have you done so far? Anything? 

_{Saturday, August 30, 2014 3:33 AM}

Hi Yogesh,

You can try the below code.

//HTML
<input type="checkbox" class="ba" checked="checked" />
<input type="text" class="tex" />

//JS
$(function () {
    $('.ba').on('change', function () {
        var checked = $(this).prop('checked');
        $('.tex').prop('disabled', !checked);
    });
});

Hope it helps

Regards

Pawan

_{Saturday, August 30, 2014 3:47 AM}

.cs

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
        {
            if (CheckBox1.Checked)
                TextBox1.Visible = true;
            else
                TextBox1.Visible = false;
        }

design code

<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
                    <asp:TextBox ID="TextBox1" runat="server" Visible="False"></asp:TextBox>

I am succeed to visible-invisible the textbox using above code. But the whole page is reloading everytime I click the checkbox.

I want the same through UpdatePanel.

Can you please help me in this.

Thank You in advance.

_{Saturday, August 30, 2014 5:44 AM}

Very good. Now just add an UpdatePanel in your html markup and put all the controls you have inside the contentTemplate section of the updatepanel. 

_{Saturday, August 30, 2014 9:43 AM}

But the whole page is reloading everytime I click the checkbox

If you are concerned about  Page Postback issue then you best option would be go with Client Side apporach (javascript or Jquery).

Jquery Apporach:

HTML:

 <asp:CheckBox ID="CheckBox1" runat="server"  />
            <asp:TextBox ID="TextBox1" runat="server" style="display:none"></asp:TextBox>

Jquery Function:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#CheckBox1').click(function () {
                    $("#TextBox1").toggle(this.checked);
                });
            });
        </script>

• Sample Working Demo

Javascript Approach:

HTML:

 <asp:CheckBox ID="CheckBox1" runat="server"  />
            <asp:TextBox ID="TextBox1" runat="server" style="display:none"></asp:TextBox>

Javascript Code:

 <script>
            function ShowHide(chk) {
                if (document.getElementById("CheckBox1").checked) {
                    document.getElementById("TextBox1").style.display = '';
                }
                else {
                    document.getElementById("TextBox1").style.display = 'none';
                }
            }
        </script>

• Sample Working Demo

_{Monday, September 1, 2014 2:14 AM}

 $("#" + "chkbxresults").prop('disabled', false);

 $("#" + "chkbxresults").prop('disabled', true);