Hide a TextBox on checking a checkbox server control in ASP.NET/C# - using Jquery or Javascript

Question

I have been trying to hide a Textbox if a Checkbox is checked again display it if the checkbox is unchecked Source Code goes like below.

   <asp:CheckBox ID="ShortStoryCheckBox" runat="server" />
<asp:TextBox ID="LeadTextBox" runat="server" Height="77px" TextMode="MultiLine" 
        Width="370px"></asp:TextBox>

So my aim is to hide LeadTextBox if ShortStoryCheckBox is checked. If it is unchecked again I have to display it. To accomplish that I tried below piece of JQuery. Below the Id's I have used are HTML id that I got from source view of browser.

<script type="text/javascript">
    $("#ctl00_PlaceHolderMain_Home_ShortStoryCheckBox").change(function () {
        if (this.checked) {
            $("#ctl00_PlaceHolderMain_Home_LeadTextBox").hide();
        }
        else {
            $("#ctl00_PlaceHolderMain_Home_LeadTextBox").show();
        }
    });
</script>

But it is not working, can anybody please help me how could I do it? or where I am going wrong? Any alternate suggestion to achieve it would also be very helpful.

Murali Murugesan · Accepted Answer · 2014-01-07 12:04:13Z

2

try with click and prop & some code refactoring

<script type="text/javascript">

$(document).ready(function(){

    $("#<%= ShortStoryCheckBox.ClientID %>").click(function () {
        if ($(this).prop("checked")===true) {
            $("#<%= LeadTextBox.ClientID %>").hide();
        }
        else {
             $("#<%= LeadTextBox.ClientID %>").show();
        }
    });
 });
</script>

edited Jan 7, 2014 at 12:04

answered Jan 7, 2014 at 11:45

Murali Murugesan

22.6k18 gold badges76 silver badges124 bronze badges

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

5 Comments

Subhamoy Over a year ago

Thanks I am trying and let you know. Just one question - am I going right way by putting id's as "ctl00_PlaceHolderMain_Home_ShortStoryCheckBox" format , or should I try with HTML controls rather?

Murali Murugesan Over a year ago

@Subhamoy, updated my answer. What version of ASP.Net do you use?

Murali Murugesan Over a year ago

@Subhamoy, if it is ASP.Net 4.0 ClientIDMode=static is available. Anyway, you can go with my code for id resolving. NO need to worry about dynamic id generation

Subhamoy Over a year ago

no luck with me :( I guess I have to use it with $(document).ready(function() { } probably...trying it..

Murali Murugesan Over a year ago

@Subhamoy, thats a basic for any event binding with document. I updated. :)

patel.milanb · Accepted Answer · 2014-01-07 11:49:50Z

2

working jsfiddle: http://jsfiddle.net/patelmilanb1/AJvJD/

$(document).on("change", "#ShortStoryCheckBox", function () {
    if ($(this).is(":checked")) {
        $("#LeadTextBox").hide();
    } else {
        $("#LeadTextBox").show();
    }
});

Second approach:

$(document).on("change", "#ShortStoryCheckBox", function () {
    $("#LeadTextBox").toggle();
});

Note: you can assign class names to textbox and checkbox for simpler use

answered Jan 7, 2014 at 11:49

patel.milanb

6,01215 gold badges62 silver badges95 bronze badges

Comments

Linga · Accepted Answer · 2014-01-07 11:47:42Z

1

You have to use the ClientID of ShortStoryCheckBox and LeadTextBox which gets the control ID for HTML markup that is generated by ASP.NET

$("#<%=ShortStoryCheckBox.ClientID%>").change(function(){
 if($(this).is(":checked"))
 {
    $('#<%= LeadTextBox.ClientID %>').hide();
 }
 else
 {
    $('#<%= LeadTextBox.ClientID %>').show();
 }
});

answered Jan 7, 2014 at 11:47

Linga

10.6k10 gold badges57 silver badges109 bronze badges

1 Comment

Subhamoy Over a year ago

Hi, my idea was Jquery can't interpret anything other than HTML controls, ShortStoryCheckBox is server control here..

Govinda Rajbhar · Accepted Answer · 2014-01-07 11:49:18Z

1

You can do with this way.

$(document).ready(function() { 
  $('#<%=ShortStoryCheckBox.ClientID%>').bind('click', function() {
    if($(this).is(":checked")) {
      $("#<%=LeadTextBox.ClientID%>").show();
    } else {
      $("#<%=LeadTextBox.ClientID%>").hide();
    }
  });
});

i hope this code will help you.

answered Jan 7, 2014 at 11:49

Govinda Rajbhar

3,0476 gold badges42 silver badges64 bronze badges

Collectives™ on Stack Overflow

Hide a TextBox on checking a checkbox server control in ASP.NET/C# - using Jquery or Javascript

4 Answers 4

5 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related