How to select checkbox and font awesome elements using JQuery

JQuery makes it easy to select an element by ID or classname but this is a bit beyond my knowledge.

I have the following styles I want applied when a function is called.

.classname input[type="checkbox"] ~ i.fa.fa-circle-o {
     color: grey;
}


.classname input[type="checkbox"]:checked ~ i.fa.fa-check-circle-o {
     color: grey;
}

So I tried putting them inside a function like this:

function greyOut(classname) {
    console.log("fired");

    $("." + classname + " input[type='checkbox'] ~ i.fa.fa-circle-o").css("color: grey");
    $("." + classname + " input[type='checkbox']:checked ~ i.fa.fa-check-circle-o").css("color: grey");
}

But this is not working at all. The function fired but no change in color for those elements and no error in console.