How to select checkbox and font awesome elements using JQuery

Question

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.

Answer 1

Could you simplify your code by using addClass() instead?

Example:

 function greyOut(classname) { $(classname).addClass("checked"); } 

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

 <div class="classname"> <input type="checkbox"> </div> 

Answer 2

IMO it's just bad jQuery syntax. When you are changin in .css() method just oen property, you must use another syntax. So, you have these two possibilities:

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

Or:

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