Question

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 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…

Answer 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.

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