jQuery 选中复选框时jQuery禁用表单元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1799255/
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
jQuery disable form element when checkbox is checked
提问by Dakota
I have a complicated jQuery form and I want to disable several form elements if a certain checkbox is checked. I'm using jQuery 1.3.2, and all the relevant plugins. What am I doing wrong here? Thanks, Dakota
我有一个复杂的 jQuery 表单，如果选中某个复选框，我想禁用多个表单元素。我正在使用 jQuery 1.3.2 和所有相关插件。我在这里做错了什么？谢谢，达科他州
Here is my HTML:
这是我的 HTML：
<li id="form-item-15" class="form-item">
<div class='element-container'>
<select id="house_year_built" name="house_year_built" class="form-select" >
...Bunch of options...
</select>
<input type="text" title="Original Purchase Price" id="house_purchase_price" name="house_purchase_price" class="form-text money" />
<input type="text" title="Current Home Debt" id="house_current_debt" name="house_current_debt" class="form-text money" />
</div>
<span class="element-toggle">
<input type="checkbox" id="house_toggle" />
<span>Do not own house</span>
</span>
</li>
Here is my jQuery:
这是我的 jQuery：
$('.element-toggle input').change(function () {
if ($(this).is(':checked')) $(this).parents('div.element-container').children('input,select').attr('disabled', true);
else $(this).parents('div.element-container').children('input,select').removeAttr('disabled'); });
采纳答案by Jordan Ryan Moore
There are a few things that should be changed. First of all, the actual HTML structure doesn't match what you're querying for in JavaScript (specifically the parents()call). Secondly, binding to the clickevent will provide better support in IE since IE will sometimes wait to fire the changeevent until after the element loses focus.
有几件事应该改变。首先，实际的 HTML 结构与您在 JavaScript 中查询的内容（特别是parents()调用）不匹配。其次，绑定到click事件将在 IE 中提供更好的支持，因为 IE 有时会等到change元素失去焦点后才触发事件。
$('.element-toggle input').bind('click', function () {
var inputs = $(this).closest('li.form-item').find('div.element-container').children('input,select');
if ($(this).attr('checked')) {
inputs.attr('disabled', true);
} else {
inputs.removeAttr('disabled');
}
});
回答by anon
just a tidbit: since jquery 1.6 you should not use $(this).attr('checked')which is always true, but rather $(this).prop('checked').
只是一个花絮：从 jquery 1.6 开始，你不应该使用$(this).attr('checked')which 总是正确的，而是$(this).prop('checked').
it is also advisable to use $(this).prop('disabled')(to test whether the element is disabled), and $(this).prop('disabled', newState)rather than attr.
还建议使用$(this).prop('disabled')（以测试元素是否被禁用），$(this).prop('disabled', newState)而不是attr.
回答by Rohit bal
That was helpful. If anyone's looking for a plugin, here you go: http://s.technabled.com/jquery-foggle
那很有帮助。如果有人正在寻找插件，请访问：http: //s.technabled.com/jquery-foggle
回答by Roman
<div class='element-container'>is not a parent for $('.element-toggle input')is your example
<div class='element-container'>不是父母因为$('.element-toggle input')是你的榜样
