Today, I needed to disable checkbox using CSS only without any HTML attribute.
Here is the code:

HTML:

<input type="checkbox" checked="checked" />
<!-- using opacity -->
<input type="checkbox" checked="checked" />
<!-- using layer -->
<input type="checkbox" checked="checked" />

CSS:

input[type="checkbox"]:nth-child(2) {
  opacity: 0.5;
  pointer-events: none;
}
input[type="checkbox"]:nth-child(3) {
  position: relative;
  pointer-events: none;
}
input[type="checkbox"]:nth-child(3):before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

Here is a working example at CodePen.

See the Pen
CSS Disable Checkbox by Animated Creativity (@animatedcreativity)
on CodePen.