Question

我有一个简单的功能，当选中/取消选中复选框时，它会禁用/启用select元素。它运作良好。但是，一旦提交表单并且已经选中了复选框（在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并不擅长......

Answer 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");
}

Answer 2

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

示例：

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

Answer 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' ) );
});

Answer 4

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

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

jQuery，如何在页面加载时使用复选框禁用或启用<select>元素？</select>

4 个答案: