Change properties of option in a select element with jQuery

Question

Code:

function disableOption(pos)
{
    //document.getElementById("selectSuggestion").options[pos].disabled=true;   <-- this is what I want to do

    var option = $(#selectRating).children()[pos];              <-- doesnt work
    $(#selectRating).find(option).prop("disabled", true);

}

function addEventListeners()
{
    $(#selectRating).bind("focus", disableOption(0));
}

function init()
{
    addEventListeners();
}

$(document).ready(init);

I'm not too familiar with the jQuery API and the syntax, I've checked http://api.jquery.com/category/traversing/ and other similar threads but haven't found a solution.

EDIT:

fixed code:

function disableOption(pos)
{
    $("#selectRating option:eq(" + pos + ")").prop("disabled", true);
}

function addEventListeners()
{
    $("#selectRating").on("focus", function() {disableOption(0);});
}

function init()
{
    addEventListeners();
}

$(document).ready(init);

[As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.](http://api.jquery.com/bind/) — epascarello, Nov 12 '13 at 19:49
@Ryuji You don't need to create the object again in disableoptions, see the last snippet in my answer. You can refer to it with `this` — PSL, Nov 12 '13 at 20:03
Please state your reason to downvote this question. Some errors were made (as I didn't check for quotes around the selectors) but besides that the question and solution to this issue stays relevant. — Petrus K., Nov 12 '13 at 20:04
@PSL Can you provide me a link to the .call() function documentation? I couldn't find anything on the jQuery API page: http://api.jquery.com/?s=call — Petrus K., Nov 12 '13 at 20:08
@Ryuji It is vanilla javascript. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call, Also just to mention that your selection of element in your question is fine (except for quotes) it should still work but you were not binding the event correctly just to mention. — PSL, Nov 12 '13 at 20:11
@PSL Ok, thanks. So whenever I add eventhandlers I should use the anonymous function syntax? (so that it binds the event rather than invoking the eventfunction?) — Petrus K., Nov 12 '13 at 20:16
@Ryuji Not really, its all comes with how you design. Here is just there because you were invoking the function instead of binding the handler, see the explanation in my answer. And if you know it is always the first option then you could just do. `function disableOption() { $(this).children(":eq(0)").prop("disabled", true); } $("#selectRating").bind("focus", disableOption); ` — PSL, Nov 12 '13 at 20:20

score 3 · Accepted Answer · answered Nov 12 '13 at 19:46

3

Quotes around your selectors!

$("#selectRating")

Can also shorten: $(#selectRating).children()[pos]; to $("#selectRating option:eq(" + pos + ")").prop("disabled", true);

That is assuming selectRating is a select element, if not, ignore that.

answered Nov 12 '13 at 19:46

tymeJV

103,943
14
161
157

I liked "are your selectors" better, =p – Gobo Nov 12 '13 at 19:47

score 1 · Answer 2 · answered Nov 12 '13 at 19:47

1

How about

$('#selectRating option:eq("' + pos + '")').prop('disabled', true);

answered Nov 12 '13 at 19:47

Kevin Sjöberg

2,261
14
20

PSL · Answer 3 · 2013-11-12T19:59:13.383

You are invoking the function instead of binding a function reference as handler to it, and remember quotes around the selector.

$(#selectRating).bind("focus", disableOption(0)); //This just invokes the function as you try to bind the handler.

should be

$("#selectRating").bind("focus", function(){
     disableOption(0);
});

and you just need to do:

$("#selectRating").children(":eq(" + pos + ")").prop("disabled", true);

Or simplify it to:

function disableOption(pos) {
   $(this).children(":eq(" + pos + ")").prop("disabled", true);
}

function addEventListeners() {
    $('#selectRating').bind("focus", function(){
        disableOption.call(this, 0);
    });
}

Change properties of option in a select element with jQuery

3 Answers3