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

Question

我有一个 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;


  }

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

Answer 1

这是因为 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' });
        }
    }

或者只是指定一个类名称并使用 className 选择它。

或者使用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 属性，而是将处理程序绑定(bind)到元素。

  $(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 更好地设置这些属性