I find selecting elements using JQuery by their ID or classname quite challenging and it's a bit outside of my expertise.
When a function is called, I would like to apply the following styles:
.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 attempted to encapsulate them within a function as shown below:
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");
}
However, despite the function being triggered, there seems to be no change in color for those elements and no errors are being logged in the console.