locked
Enable Disable TextBox using Checkbox event RRS feed

  • Question

  • User-2117742751 posted

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

    Saturday, August 30, 2014 3:23 AM

Answers

  • User2103319870 posted

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 30, 2014 9:28 AM

All replies

  • User-1360095595 posted

    What have you done so far? Anything? 

    Saturday, August 30, 2014 3:31 AM
  • User1633621018 posted

    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:33 AM
  • User-2117742751 posted

    .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 3:47 AM
  • User-1360095595 posted

    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 5:44 AM
  • User2103319870 posted

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 30, 2014 9:28 AM
  • User2103319870 posted

    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>

    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>
    Saturday, August 30, 2014 9:43 AM
  • User1953918952 posted

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

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

    Monday, September 1, 2014 2:14 AM