Javascript 如何从复选框 onclick 或 onchange 调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28372466/
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
How to call a function from checkbox onclick or onchange
提问by Radoslav Trenev
I have a form in which i want to disable or hide two input fields by selecting a checkbox. I can easily do it when on document.ready, but since i am appending those fields the function does not take effect. How do i call the function with onClick?
我有一个表单，我想通过选择一个复选框来禁用或隐藏两个输入字段。我可以在 document.ready 上轻松完成，但由于我附加了这些字段，因此该功能不会生效。我如何使用 onClick 调用该函数？
Here's my working code
这是我的工作代码
$(function() {
$(checkbox).click(function() {
if ($('#checkbox').is(':checked')) {
$('#appTimes').find('input').attr('disabled', true);
} else {
$('#appTimes').find('input').removeAttr('disabled');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
<input name="stopTime1" type="text" id="stopTime1" />
<input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" type="checkbox" id="checkbox" />And this is what i am trying to do:
这就是我想要做的：
function boxDisable(e) {
$(this).click(function() {
if ($(this).is(':checked')) {
$(e).find('input').attr('disabled', true);
} else {
$(e).find('input').removeAttr('disabled');
}
});
}<div class="appTimes" id="appTimes">
<input name="stopTime1" type="text" id="stopTime1" />
<input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" onclick="boxdisable(appTimes);" type="checkbox" id="checkbox" />---EDIT---------------Let me redefine: My code is using .appendto create multipleinstances of the above code. Since the amount of append is unlimited i am unable to define the checkbox with $('#id'), because there might be hundreds of them like $('#id1'), $('#id2').. etc. I need a function that avoids mentioning the exact element id's, is called onClickby the checkboxand affecting beforehead div, which is alsoappended.
---编辑---------------让我重新定义：我的代码正在使用 . 追加以创建上述代码的多个实例。由于追加的数量是无限的，我无法定义复选框$('#id')，因为可能有数百个，例如$('#id1')，$('#id2')..等。我需要一个避免提及确切元素 ID 的函数，由复选框调用onClick并影响 beforehead div，它也被附加。
采纳答案by Maxim Mazurok
It works :)
有用 ：）
function boxDisable(e, t) {
if (t.is(':checked')) {
$(e).find('input').attr('disabled', true);
} else {
$(e).find('input').removeAttr('disabled');
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
<input name="stopTime1" type="text" id="stopTime1" />
<input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" onclick="boxDisable(appTimes, $(this));" type="checkbox" id="checkbox" />回答by Ted
If the elements do not exist at the time of doc ready, use .on, like so:
如果在文档准备好时元素不存在，请使用.on，如下所示：
$(document).ready(function(){
$(document).on('change', 'input[type="checkbox"]', function(e){
//do your stuff here
});
});
回答by error
Don't use the onclickattribute. What your code is doing is attaching a new onclick handler after the user clicks. That's probably not what you want.
不要使用该onclick属性。您的代码正在做的是在用户单击后附加一个新的 onclick 处理程序。这可能不是你想要的。
You should also use propinstead of attrfor changing disabled.
您还应该使用prop而不是attr更改disabled.
Since the element you want to attach your event to may not exist on document ready, attach it to the nearest ancestor that you're sure will be there.
由于您想要将事件附加到的元素在文档就绪时可能不存在，请将其附加到您确定将在那里的最近的祖先。
$( function() { // wait for document ready
$( '#parent-div' ).on( 'click', ':checkbox', function( e ) { // attach click event
$( '#appTimes' ).find(':text').prop( 'disabled', $(e.currentTarget).is(':checked') ); // set disabled prop equal to checked property of checkbox
} );
} );
回答by Sunil kumar
$(function() {
$(checkbox).click(function() {
if ($('#checkbox').is(':checked')) {
$('#appTimes').find('input').attr('disabled', true);
} else {
$('#appTimes').find('input').removeAttr('disabled');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
<input name="stopTime1" type="text" id="stopTime1" />
<input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" type="checkbox" id="checkbox" />