Javascript jQuery，如何在页面加载时禁用或启用带有复选框的 <select> 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10524631/
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, how to disable or enable <select> element with checkbox upon page loading?
提问by Pawe? Duda
I have a simple function which disables/enables select element when checkbox is checked/unchecked. It works well. However, once the form is submitted and the checkbox loads already checked (with help of PHP), selection is not disabled until I click on the checkbox twice.
我有一个简单的功能，当复选框被选中/取消选中时禁用/启用选择元素。它运作良好。但是，一旦提交表单并且复选框加载已经被选中（在 PHP 的帮助下），选择不会被禁用，直到我点击复选框两次。
<select id="worldSelect" class="select" name="world">
<input id="worldcb" type="checkbox" checked="yes" value="any" name="world">
any world
function toggleSelection(element){
if (this.checked) {
$(element.data).attr('disabled', 'disabled');
} else {
$(element.data).removeAttr('disabled');
}
}
$(function() {
$('#worldcb').click('#worldSelect', toggleSelection);
});
I have tried several things, however I'm not any good with jQuery so far...
我已经尝试了几件事，但是到目前为止我对 jQuery 没有任何好处......
回答by James Johnson
Looks like you were almost there. Just a couple of syntax errors.
看起来你快到了。只是几个语法错误。
$("#worldcb").click(function(){
var el = $("#worldSelect");
if (el){
el.removeAttr("disabled");
if (this.checked){
el.attr("disabled", "disabled");
}
}
});
Here's a jsFiddleto demonstrate.
这是一个jsFiddle来演示。
As for retaining the disabled state when the page is posted back, you just need to run some logic when the page is loaded.
至于在页面回发时保留禁用状态，您只需要在页面加载时运行一些逻辑即可。
if ($("#worldcb").is(":checked")){
$("#worldSelect").attr("disabled", "disabled");
}
回答by Malyo
Well easiest way would be asigning your toggleFunction to document ready, so every time page loads it will check that checkbox status, and correct displaying of the select. You can give autocomplete="off" atribute to specific form field, to make it not cache (so the checkbox will be turned off after page refresh).
最简单的方法是将您的 toggleFunction 分配给文档就绪，因此每次页面加载时，它都会检查复选框状态，并正确显示选择。您可以为特定表单字段提供 autocomplete="off" 属性，使其不缓存（因此页面刷新后复选框将关闭）。
Example:
例子：
$(document).ready(function() {
toggleSelection('#worldcb');
});
回答by gotofritz
Well you need to sync the two on load. Also change toggleSelection so that it works both called as an event handler or standalone
那么你需要在加载时同步两者。还要更改 toggleSelection 以便它既可以作为事件处理程序调用，也可以独立运行
function toggleSelection( element, scope ){
scope = scope || this;
if (scope.checked) {
$(element.data).attr('disabled', 'disabled');
} else {
$(element.data).removeAttr('disabled');
}
}
$(function() {
$('#worldcb').click('#worldSelect', toggleSelection);
toggleSelection( { data : '#worldSelect' }, document.querySelector( '#worldcb' ) );
});
回答by Sam Tyson
If you always want it to be disabled when the page loads, just add the disabled property to the select html element.
如果您总是希望在页面加载时禁用它，只需将 disabled 属性添加到 select html 元素。
<select id="worldSelect" class="select" name="world" disabled></select>
