Enable and disable TextBox with a checkbox in C#

Question

I want to Enable Disable my textbox because either user can enter the call preparation time in the text box or it can select the checkbox for unlimited time.

My aspx code

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr class="rowPadding">
        <td class="labelStyle" width="240px">
            <asp:Label runat="server" ID="lblPrepTime" Width="230px" meta:resourcekey="lblPrepTimeResource1"> Call preparation time (seconds): </asp:Label>
        </td>
        <td class="textBoxStyle" width="100px">
            <asp:TextBox runat="server" ID="txtPrepTime" Width="80px" meta:resourcekey="txtPrepTimeResource1"></asp:TextBox>
        </td>
        <td class="labelPaddingRight" width="300px">
            <asp:CheckBox runat="server" ID="cbUnlimited" Text="unlimited" meta:resourcekey="cbUnlimitedResource1" />
        </td>
    </tr>
</table>

my code behind is

protected void Page_Load(object sender, EventArgs e)
{
   try
   {
      if (!IsPostBack)
      {
          BindAllCallSettings();
      }
   }
   catch (Exception ex)
   {
         Logger.WriteException(ex);
   }
}

Answer 1

use javascript:

<asp:CheckBox runat="server" ID="cbUnlimited" Text="unlimited" meta:resourcekey="cbUnlimitedResource1" onchange="myfn()"/>

<script type="text/javascript">
    function myfn(){
    var val=document.getElementById("txtPrepTime");`
    if(this.val==checked)
    {
        val.style.visibility=true;//or false as you want
    } 
    else 
    {
        val.style.visibility=true;//or false as you want  
    }
}
</script>

Answer 2

Add this method in your client side code..

<script type="text/javascript">
    function EnableDisableCheckBox() {
        if (document.getElementById('<%=cbUnlimited.ClientID%>').checked) {
            document.getElementById('<%=txtPrepTime.ClientID%>').disabled = true;
        }
        else {
            document.getElementById('<%=txtPrepTime.ClientID%>').disabled = false;
        }
    }
</script>

then replace your onclick event with the given below,

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr class="rowPadding">
        <td class="labelStyle" width="240px">
            <asp:Label runat="server" ID="lblPrepTime" Width="230px" meta:resourcekey="lblPrepTimeResource1"> Call preparation time (seconds): </asp:Label>
        </td>
        <td class="textBoxStyle" width="100px">
            <asp:TextBox runat="server" ID="txtPrepTime" Width="80px" meta:resourcekey="txtPrepTimeResource1"></asp:TextBox>
        </td>
        <td class="labelPaddingRight" width="300px" onclick="EnableDisableCheckBox()">
            <asp:CheckBox runat="server" ID="cbUnlimited" Text="unlimited" meta:resourcekey="cbUnlimitedResource1" />
        </td>
    </tr>
</table>

in your code behind use this, Now whenever the page is refreshed and you bind your data, it will save its state on page load too...

protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        if (!IsPostBack)
        {
            BindAllCallSettings();
        }
        this.txtPrepTime.Enabled = !(this.cbUnlimited.Checked);
    }
    catch (Exception ex)
    {
        Logger.WriteException(ex);
    }
}