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

Answer 1

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.

Answer 2

How about

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

Answer 3

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