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

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

• c#
• javascript
• jquery
• asp
• checkbox

3 Answers 3

That is because asp 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

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.

The reason could be the Id selector # of jQuery.
The Id get change for asp 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./Articles/34151/ASP-NET-4-0-Client-ID-Feature