从复选框调用 JavaScript 函数 asp.net
本文关键字:asp net 函数 JavaScript 复选框 调用 | 更新日期: 2023-09-27 18:35:27
我有一个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