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

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.

我有一个简单的函数,当选中/取消选中复选框时,它禁用/启用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);
});

I have tried several things, however I'm not any good with jQuery so far...

我尝试了几件事,但到目前为止我对jQuery没有任何好处......

4 个解决方案

#1

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

#2

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设置为文档就绪,因此每次加载页面时都会检查复选框状态,并正确显示select。您可以将autocomplete =“off”属性赋予特定的表单字段,以使其不缓存(因此在页面刷新后将关闭该复选框)。

Example:

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

#3

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

#4

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>

#1