Question

I want to make a script which will disable a select form element upon checking desired checkbox. Since there will be more times I will use this, I wanted to make it as a function which takes target selection id as an argument. The problem is, this function doesn’t work when I’m passing the id as argument. On the contrary, it seems to work with hard-coded id.

<select id="worldSelect" class="select" name="world">
<input id="worldcb" type="checkbox" checked="yes" value="any" name="world">

function toggleSelection(id){
    var el = '#' + id;
    if (this.checked) {
        $(el).attr('disabled', 'disabled');
    } else {
        $(el).removeAttr('disabled');
    }
}

$(function() {
    toggleSelection('worldSelect');
    $('#worldcb').click(toggleSelection);
});

Answer 1

You can’t invoke the same function twice and expect the function to remember the id variable.

However you could do something like this:

function toggleSelection(e){
    var el = '#' + e.data;
    console.log(arguments);
    if (this.checked) {
        $(el).attr('disabled', 'disabled');
    } else {
        $(el).removeAttr('disabled');
    }
}

$(function() {
    $('#worldcb').click('worldSelect', toggleSelection);
});​

Fiddle: http://jsfiddle.net/4ZBne/1/