Hi Craig, this is a solutions using only CSS, maybe someone can give you a better way, but I love made simple. 

Field6 in the example I share with you is the value of the Checkbox I used for this example, you must find yours in your specific Checkbox where you want to apply this and replace the number 6 for you Field id number.  The other number's next to -0, -1, -4, according your image is the positions of your checkbox values, the first value always started with -0. 

/* Disable mouse interaction for the checkbox inputs */
#Field6-0,
#Field6-1,
#Field6-4 {
  pointer-events: none;   /* Prevents any mouse interaction */
  opacity: 0.6;           /* Gives a disabled/readonly visual appearance */
  cursor: not-allowed;    /* Shows a "not allowed" cursor on hover */
}

/* Disable mouse interaction for the associated labels */
label[for="Field6-0"],
label[for="Field6-1"],
label[for="Field6-4"] {
  pointer-events: none;   /* Prevents label click events */
  opacity: 0.6;           /* Matches the disabled input style */
  cursor: not-allowed;    /* Shows the same visual cursor */
}

I hope that can help you.