Disable checkbox click via CSS

If pointer-events is not supported in your browser, then no, not with css only.

just the html solution will be like this.

<input type="checkbox" disabled="disabled" id="checkBox"/>

if you wish to do this using javascript

document.getElementById("checkBox").disabled=true;

You can put a transparent div on top of the checkbox to make it un-clickable by toggling a class on the parent object. Something like this...

.container{
  position:relative;
  display:block;

}
.cover{
  width:100%;
  height:100%;
  background:transparent;
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  display:none;

}

.container.disable-checkbox .cover{
  display:block;
}

<div class="container">
  <div class="cover"></div>
  <input type="checkbox"/> "clickable"

</div>
<div class="container disable-checkbox">
  <div class="cover"></div>
  <input type="checkbox"/> "un-clickable"
</div>

You probably need some javascript for this. You could use this exemple if you're running jQuery:

$('input[type="checkbox"]').on('click', function(ev){
    ev.preventDefault();
})

Or a quick and dirty method, add an onClick attribute to the checkbox like this:

<input type="checkbox" onClick="return false;">