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

或者只是分配一个类名并使用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属性，将处理程序绑定到元素。

  $(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

更好地设置这些属性

Answer 2

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

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

Answer 3

原因可能是jQuery的 Id选择器＃ 如果您使用Master Page或User_controls，则会获得asp.net的更改您可以将静态clientId模式用于控件，该模式不会更改控件的ID

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

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

3 个答案: