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

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

• javascript
• jquery
• html

• Are you POSTing the form or submitting via AJAX? Can't you uncheck it by default on pageload? Maybe add the code you're using to submit the form as well. – jamesmortensen Commented May 9, 2012 at 21:56
• Dupe of stackoverflow.com/questions/10523620/… ? – SenorAmor Commented May 9, 2012 at 22:01
• no, not really... My previous problem was fixed, however another one that came was I wanted to get it to work on page load – Paweł Duda Commented May 10, 2012 at 7:51

4 Answers 4

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

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

Example:

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

Well you need to sync the two on load. Also change toggleSelection so that it works both called as an event handler or standalone

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

If you always want it to be disabled when the page loads, just add the disabled property to the select html element.

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