c# - Call JavaScript function from asp.net checkbox - Stack Overflow

admin管理员组

文章数量:1352208

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

Share Improve this question Follow edited Feb 24, 2019 at 18:51 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Oct 16, 2013 at 3:47 sjdsjd 1,40144 gold badges3232 silver badges4949 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

本文标签： cCall JavaScript function from aspnet checkboxStack Overflow