Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

please help

share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

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

share|improve this answer
1  
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) { } –  jasonscript Oct 16 at 4:22
 
@jasonscript one more thing is prop v/s attr. Have updated the answer. Till ur comment i dint notice the usage on inline onclick. :) –  PSL Oct 16 at 4:29
 
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? –  sjd Oct 16 at 5:18
 
@user1616785 if u need to trigger it manuaally. ex for the last snippet you can trigger it ther only $('#<%= chkVehicle.ClientID %>').change(toggleVehicle).change();` –  PSL Oct 16 at 5:24
 
@PSL thanks a lot it worked nice. but i really didnt understand this line ; may i ask what does this mean ? .change(toggleVehicle).change(); –  sjd Oct 16 at 5:34
show 2 more comments
up vote 2 down vote

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.

share|improve this answer
add comment
up vote 1 down vote

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.