How to grey out checkboxes that aren't checked?

Question

I have unordered lists of checkbox input.Once an input is checked I want the rest to be greyed out with the option of checking another input that will also be highlighted.

instead of toggling disabled, add/remove class grey

The JS in my snippet is the closest related example I could find but this doesn't suit my purpose as it disables checkboxes I just want them grey

 function ckChange(ckType){ var ckName = document.getElementsByName(ckType.name); var checked = document.getElementById(ckType.id); if (checked.checked) { for(var i=0; i < ckName.length; i++){ if(!ckName[i].checked){ ckName[i].disabled = true; }else{ ckName[i].disabled = false; } } } else { for(var i=0; i < ckName.length; i++){ ckName[i].disabled = false; } } }

 input { opacity: 1; } input.grey { opacity: 0.5; }

 <ul> <li> <td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1 </li> <li> <input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2 </li> <li> <input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3 </li> <li> <input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4 </li> <ul>

Answer 1

You coule use add/remove class instead off set disabled

Moreover, on uncheck, check if all is currently unchecked, if that, remove grey for all, else add grey for the checked

 function onChecked(ckName) { for (var i = 0; i < ckName.length; i++) { if (!ckName[i].checked) { ckName[i].classList.add('grey') } else { ckName[i].classList.remove('grey') } } } function onUnchecked(ckName) { const allUnchecked = [...ckName].every(el => !el.checked) if (allUnchecked) { for (var i = 0; i < ckName.length; i++) { ckName[i].classList.remove('grey') } } else { for (var i = 0; i < ckName.length; i++) { if (!ckName[i].checked) { ckName[i].classList.add('grey') } } } } function ckChange(ckType) { var ckName = document.getElementsByName(ckType.name); var checked = document.getElementById(ckType.id); if (checked.checked) { onChecked(ckName) } else { onUnchecked(ckName) } }

 input { opacity: 1; } input.grey { opacity: 0.3; }

 <ul> <li> <td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1 </li> <li> <input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2 </li> <li> <input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3 </li> <li> <input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4 </li> <ul>