Checkbox css style to look like disabled

Question

I need to style enabled checkbox to look like disabled, but style="background: #e4e4ee4;" doesn't work. Could someone help me? How to make checkbox to look like it has attribute disabled with css? (Case with usage attribute disable is forbidden).

Answer 1

As adopted from Nezure's answer, but don't forget to add the pointer-events property and set it to none to prevent clicks!

.disabled-checkbox {
  opacity:0.5;
  pointer-events: none;
}

Example: https://jsfiddle.net/gfb0gc3h/67/