Disabling select element when checkbox is checked with jQuery

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

Are you suggesting that toggleSelection('worldSelect'); works, but $('#worldcb').click(toggleSelection); doesn't? — Steve
– Steve, Commented May 9, 2012 at 20:33
Hiya, try this short and nice! jsfiddle.net/RqGnF let me know if you like it I can set this as answer, hope this helps, have a nice one, cheerios! — Tats_innit
– Tats_innit, Commented May 9, 2012 at 20:36
No, he is saying that replacing var el = '#' + id; with var el = '#' + 'worldSelect'; works. Then you also wouldn't need the line toggleSelection('worldSelect'); — Tyilo
– Tyilo, Commented May 9, 2012 at 20:38

Tyilo · Accepted Answer · 2012-05-09 20:34:47Z

2

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/

answered May 9, 2012 at 20:34

Tyilo

30.4k41 gold badges123 silver badges204 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aziz punjani Over a year ago

$(el).prop('disabled', this.checked ) a shorter way to write it. +1 for actually understanding the problem and what the OP intended. jsfiddle.net/4ZBne/2

Tyilo Over a year ago

@Interstellar_Coder I actually know almost nothing about jQuery. I just looked the click function up.

aziz punjani Over a year ago

Tyilo, in that case you deserve more than a +1 :-)

j08691 · Accepted Answer · 2012-05-09 20:38:44Z

1

How about:

$('#worldcb').click(function() {
    toggleSelection('worldSelect', $(this).is(':checked'));
});

function toggleSelection(sel, chk) {
    $('#' + sel).attr('disabled', chk);
}

jsFiddle example.

The toggleSelection() function takes two arguments, sel - the ID of the select box and chk, the checkbox to use.

answered May 9, 2012 at 20:38

j08691

209k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

Disabling select element when checkbox is checked with jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related