从 asp.net 调用 JavaScript 函数复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19394892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call JavaScript function from asp.net checkbox
提问by sjd
I have a jQuery function as below which I want to be called on a checkbox click. When I use an input type="checkbox"it works fine. But I want to check/uncheck the checkbox from c# code(fillform()) and based on that the JavaScript function also has to execute
我有一个 jQuery 函数，如下所示，我想在单击复选框时调用它。当我使用input type="checkbox"它时，它工作正常。但是我想从 c# 代码（fillform（））中选中/取消选中复选框，并且基于此 JavaScript 函数也必须执行
But if I set runat="server"or if I use asp:checkboxthen the below function is not called. I tried using the below code for asp:checkbox as well as for input box in page_load, but the function is not called
但是，如果我设置runat="server"或使用，asp:checkbox则不会调用以下函数。我尝试将以下代码用于 asp:checkbox 以及 page_load 中的输入框，但未调用该函数
C# code
C#代码
Page_load
{
chkVehicle.Attributes.Add("onclick", "toggleVehicle();");
}
FillForm
{
chkVehicle.Checked = ObjUR.HasVehicle;
}
jQuery function
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' });
}
}
回答by PSL
That is because asp.net appends some more stuffs to the ids, like ctl, contentplaceholder etc... something like ctl00_ContentPlaceHolder1_chkVehicle. Instead you can do this:
那是因为 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' });
}
}
or just assign a class name and select it using the className.
或者只是分配一个类名并使用 className 选择它。
or use jquery attribute ends-withselector, which could turn out risky though since it does a wildcard match, and slower as well.
或者使用 jquery 属性的结尾带选择器，这可能会带来风险，因为它会进行通配符匹配，而且速度也较慢。
if ($('[id$="chkVehicle"]').is(':checked')) {
....
or as @jsonscript suggests
或如@jsonscript 建议的那样
chkVehicle.Attributes.Add("onclick", "toggleVehicle('#" + chkVehicle.ClientId + "');");
and
和
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' });
}
}
Also instead of using onclickattribute, bind the handler to the element.
另外，不要使用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);
}
Also use prop instead of attr if you are not using really older version of jquery. That will set these kind of properties better than attr
如果您没有使用真正旧版本的 jquery，也可以使用 prop 而不是 attr。这将比 attr 更好地设置这些类型的属性
回答by Bhupendra Shukla
In this code: chkVehicle.Attributes.Add("onclick", "toggleVehicle();");, chkVehicle is the Id of checkbox.
在这段代码中： chkVehicle.Attributes.Add("onclick", "toggleVehicle();");, chkVehicle 是复选框的Id。
Make the id of the checkbox to "Static" because when .aspx page is render, it appends the other ids of dom to the controls id. The Static will prevent this change and id of checkbox will remain same.
将复选框的 id 设置为“静态”，因为当 .aspx 页面呈现时，它会将 dom 的其他 id 附加到控件 id。静态将阻止此更改，复选框的 id 将保持不变。
回答by ????
The reason could be the Id selector #of jQuery.
The Id get change for asp.net if you use Master Pageor User_controls.
You can use static clientId mode to the control which will not change the id of your controls
原因可能是jQuery的Id 选择器#。
如果您使用Master Page或，则 asp.net 的 Id 会发生变化User_controls。
您可以对控件使用静态 clientId 模式，该模式不会更改控件的 id
Here is a good article for the same
http://www.codeproject.com/Articles/34151/ASP-NET-4-0-Client-ID-Feature
这是一篇关于相同http://www.codeproject.com/Articles/34151/ASP-NET-4-0-Client-ID-Feature的好文章
