Is there a way to have two different disabled states for checkboxes, one with a gray background and the other with a blue background, while maintaining the same functionality?
Code within file.css
.overall-example input[type=checkbox]:checked + label {
background-color: #8cecbf;
opacity: 1;
}
.overall-example input[type=checkbox]:disabled + label {
background-color: #424242;
opacity: 1;
}
//Rename disable to 'disabledBlue'
.overall-example input[type=checkbox]:disabled + label {
background-color: #4896aa;
opacity: 1;
}
Code within file.js
//within my file.js
//Disable example1-checkbox with gray background
document.getElementById('example1-checkbox').disabled = true;
//Disable example2-checkbox with blue background
document.getElementById('example2-checkbox').disabledBlue = true;