jQuery，如何在页面加载时禁用或启用带有复选框的 <select> 元素？答案

【问题标题】：jQuery, how to disable or enable <select> element with checkbox upon page loading?jQuery，如何在页面加载时禁用或启用带有复选框的 <select> 元素？
【发布时间】：2012-05-09 21:53:17
【问题描述】：

我有一个简单的功能，可以在选中/取消选中复选框时禁用/启用选择元素。它运作良好。但是，一旦提交了表单并且已经检查了复选框加载（在 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);
});

我已经尝试了几件事，但是到目前为止我对 jQuery 并不擅长......

【问题讨论】：

您是发布表单还是通过 AJAX 提交？您不能在页面加载时默认取消选中它吗？也可以添加您用来提交表单的代码。
欺骗stackoverflow.com/questions/10523620/… ?
不，不是真的......我之前的问题已经解决了，但是另一个问题是我想让它在页面加载时工作

标签： javascript jquery html

【解决方案1】：

看起来你快到了。只是几个语法错误。

$("#worldcb").click(function(){
    var el = $("#worldSelect");
    if (el){
        el.removeAttr("disabled");
        if (this.checked){
            el.attr("disabled", "disabled");     
        }
    }
});

这里有一个jsFiddle 来演示。

至于页面回发时保持禁用状态，只需要在页面加载时运行一些逻辑即可。

if ($("#worldcb").is(":checked")){
    $("#worldSelect").attr("disabled", "disabled");
}

【讨论】：

这不是 TO 的问题。当页面加载并且复选框已经被选中时，选择应该被禁用。

【解决方案2】：

最简单的方法是将您的 toggleFunction 分配给文档就绪，因此每次页面加载时它都会检查复选框状态，并正确显示选择。您可以将 autocomplete="off" 属性赋予特定的表单字段，使其不缓存（因此该复选框将在页面刷新后关闭）。

例子：

$(document).ready(function() {
    toggleSelection('#worldcb');
});

【讨论】：

【解决方案3】：

您需要在加载时同步两者。还要更改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' ) );
});

【讨论】：

【解决方案4】：

如果您总是希望在页面加载时禁用它，只需将 disabled 属性添加到 select html 元素。

<select id="worldSelect" class="select" name="world" disabled></select>

【讨论】：

或者只是为复选框添加 autocomplete="off" 属性。但是如果他想要缓存选择，那么他需要再次进行检查。