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

【问题标题】：Call JavaScript function from asp.net checkbox从 asp.net 复选框调用 JavaScript 函数
【发布时间】：2013-10-24 01:32:37
【问题描述】：

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

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

C#代码

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

  } 
  FillForm
  {
    chkVehicle.Checked = ObjUR.HasVehicle;


  }

jQuery 函数

 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.net checkbox

【解决方案1】：

那是因为 asp.net 在 id 上附加了一些东西，比如 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 更好地设置这些属性

【讨论】：

此方法的替代方法是将控件的 id 传递给 javascript 函数因此您的 c# 将是 chkVehicle.Attributes.Add("onclick", "toggleVehicle(" + chkVehicle.ClientId + ");") 然后您的 JS 将类似于 function toggleVehicle(chkBoxId) { }
@jasonscript 另一件事是 prop v/s attr。已更新答案。直到您发表评论，我才注意到内联 onclick 的用法。 :)
非常感谢。如果我手动单击复选框，则该功能将被执行。但是当从 C# 代码中设置复选框值时，如帖子中所示，则此功能无效。能实现吗？
@user1616785 如果您需要手动触发它。例如最后一个 sn-p 你只能触发它 $('#<%= chkVehicle.ClientID %>').change(toggleVehicle).change();`
@PSL 非常感谢它运行良好。但我真的不明白这条线；请问这是什么意思？ .change(toggleVehicle).change();

【解决方案2】：

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

将复选框的 id 设置为“静态”，因为在渲染 .aspx 页面时，它会将 dom 的其他 id 附加到控件 id。静态将阻止此更改，并且复选框的 id 将保持不变。

【讨论】：

【解决方案3】：

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

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

【讨论】：