Call JavaScript function from asp.net checkbox

Question

I have a jQuery function as below which I want to be called on a checkbox click. When I use an input type="checkbox" it works fine. But I want to check/uncheck the checkbox from c# code(fillform()) and based on that the JavaScript function also has to execute

But if I set runat="server" or if I use asp:checkbox then the below function is not called. I tried using the below code for asp:checkbox as well as for input box in page_load, but the function is not called

C# code

Page_load
  {
    chkVehicle.Attributes.Add("onclick", "toggleVehicle();");

  } 
  FillForm
  {
    chkVehicle.Checked = ObjUR.HasVehicle;


  }

jQuery function

 function toggleVehicle() {
        if ($('#chkVehicle').is(':checked')) {
            $('#divVehicle :input').removeAttr('disabled');
            $('#divVehicle').css({ "background-color": 'transparent' });
        } else {
            $('#divVehicle :input').attr('disabled', true);
            $('#divVehicle').css({ "background-color": 'gray' });
        }
    }

PSL · Accepted Answer · 2013-10-16 05:24:57Z

4

That is because asp.net appends some more stuffs to the ids, like ctl, contentplaceholder etc... something like ctl00_ContentPlaceHolder1_chkVehicle. Instead you can do this:

 function toggleVehicle() {
         var chkVehicle  = '#<%= chkVehicle.ClientID %>';
        if ($(chkVehicle).is(':checked')) {
            $('#divVehicle :input').prop('disabled', false);
            $('#divVehicle').css({ "background-color": 'transparent' });
        } else {
            $('#divVehicle :input').prop('disabled', true);
            $('#divVehicle').css({ "background-color": 'gray' });
        }
    }

or just assign a class name and select it using the className.

or use jquery attribute ends-with selector, which could turn out risky though since it does a wildcard match, and slower as well.

      if ($('[id$="chkVehicle"]').is(':checked')) {
       ....

or as @jsonscript suggests

chkVehicle.Attributes.Add("onclick", "toggleVehicle('#" + chkVehicle.ClientId + "');");

and

 function toggleVehicle(chkVehicle) {

        if ($(chkVehicle).is(':checked')) {
            $('#divVehicle :input').prop('disabled', false);
            $('#divVehicle').css({ "background-color": 'transparent' });
        } else {
            $('#divVehicle :input').prop('disabled', true);
            $('#divVehicle').css({ "background-color": 'gray' });
        }
    }

Also instead of using onclick attribute, bind the handler to the element.

  $(function(){ //DOM ready
       $('#<%= chkVehicle.ClientID %>').change(toggleVehicle);   

  });

   function toggleVehicle() {
         var $divVehicle = $('#divVehicle');
        if (this.checked) {
            $divVehicle.css({ "background-color": 'transparent' });
        } else {
            $divVehicle.css({ "background-color": 'gray' });
        }
        $divVehicle.find(':input').prop('disabled', !this.checked);
   }

Also use prop instead of attr if you are not using really older version of jquery. That will set these kind of properties better than attr

edited Oct 16, 2013 at 5:24

answered Oct 16, 2013 at 3:51

PSL

124k21 gold badges257 silver badges243 bronze badges

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

6 Comments

jasonscript Over a year ago

An alternative to this method is to pass the id of the control into the javascript function So your c# would be chkVehicle.Attributes.Add("onclick", "toggleVehicle(" + chkVehicle.ClientId + ");") then your JS would be like function toggleVehicle(chkBoxId) { }

PSL Over a year ago

@jasonscript one more thing is prop v/s attr. Have updated the answer. Till ur comment i dint notice the usage on inline onclick. :)

sjd Over a year ago

thanks a lot. if i click the checkbox manually the function gets executed. but when the checkbox value is set from c# code as shown in the post then this function has no effect. can it be achieved?

PSL Over a year ago

@user1616785 if u need to trigger it manuaally. ex for the last snippet you can trigger it ther only $('#<%= chkVehicle.ClientID %>').change(toggleVehicle).change();`

sjd Over a year ago

@PSL thanks a lot it worked nice. but i really didnt understand this line ; may i ask what does this mean ? .change(toggleVehicle).change();

|

Bhupendra Shukla · Accepted Answer · 2013-10-16 04:22:34Z

1

In this code: chkVehicle.Attributes.Add("onclick", "toggleVehicle();");, chkVehicle is the Id of checkbox.

Make the id of the checkbox to "Static" because when .aspx page is render, it appends the other ids of dom to the controls id. The Static will prevent this change and id of checkbox will remain same.

answered Oct 16, 2013 at 4:22

Bhupendra Shukla

3,9146 gold badges43 silver badges62 bronze badges

Comments

शेखर · Accepted Answer · 2013-10-16 04:35:30Z

1

The reason could be the Id selector # of jQuery.
The Id get change for asp.net if you use Master Page or User_controls.
You can use static clientId mode to the control which will not change the id of your controls

Here is a good article for the same
http://www.codeproject.com/Articles/34151/ASP-NET-4-0-Client-ID-Feature

answered Oct 16, 2013 at 4:35

शेखर

17.6k14 gold badges64 silver badges123 bronze badges

Collectives™ on Stack Overflow

Call JavaScript function from asp.net checkbox

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related