从复选框调用 JavaScript 函数 asp.net

Call JavaScript function from asp.net checkbox

本文关键字：asp net 函数 JavaScript 复选框 调用      更新时间：2023-09-26

我有一个jQuery函数，如下所示，我希望在单击复选框时调用该函数。当我使用input type="checkbox"时，它可以正常工作。但是我想选中/取消选中 c# 代码（fillform（））中的复选框，并基于此 JavaScript 函数也必须执行

但是如果我设置runat="server"或者如果我使用asp:checkbox则不会调用以下函数。我尝试将以下代码用于 asp：checkbox 以及 page_load 中的输入框，但没有调用该函数

C# 代码 

Page_load
  {
    chkVehicle.Attributes.Add("onclick", "toggleVehicle();");
  } 
  FillForm
  {
    chkVehicle.Checked = ObjUR.HasVehicle;

  }

j查询函数

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

那是因为 asp.net 在ids上附加了一些东西，比如ctl，contentplaceholder等......比如ctl00_ContentPlaceHolder1_chkVehicle。相反，您可以这样做：

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

或者只分配一个类名并使用类名选择它。

或者使用jQuery属性ends-with选择器，这可能会有风险，因为它会进行通配符匹配，而且速度也更慢。

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

或如@jsonscript所建议的那样 

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

和

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

此外，不要使用 onclick 属性，而是将处理程序绑定到元素。

  $(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);
   }

如果你没有使用真正旧版本的jquery，也可以使用prop而不是attr。这将使这些属性比 attr 更好

在这段代码中： chkVehicle.Attributes.Add("onclick", "toggleVehicle();"); ，chkVehicle 是复选框的 ID。

将复选框的 id 设置为"静态"，因为当呈现页面时.aspx它会将 dom 的其他 id 附加到控件 id。静态将阻止此更改，复选框的 id 将保持不变。

原因可能是 jQuery 的 Id 选择器 #。
如果使用 Master Page 或 User_controls，则 Id 会更改 asp.net。
您可以对控件使用静态 clientId 模式，该模式不会更改控件的 id

这是一篇相同的好文章
http://www.codeproject.com/Articles/34151/ASP-NET-4-0-Client-ID-Feature

相关文章：