Disbale a checkbox line

Hello, I have a grid of checkboxes in my character sheet :                             <div class='fatigue-container'> <div class='fatigue-radio fatigue0 title2'>Fatigue :</div> <input class='fatigue-radio fatigue4 sheet-rad' type='radio' name='attr_fatigue' value='1' checked/><span></span> <input class='fatigue-radio fatigue5 sheet-rad' type='radio' name='attr_fatigue' value='2'><span></span> <input class='fatigue-radio fatigue6 sheet-rad' type='radio' name='attr_fatigue' value='3'><span></span> <input class='fatigue-radio fatigue7' type='radio' name='attr_fatigue' value='4'><span></span> <input class='fatigue-radio fatigue8' type='radio' name='attr_fatigue' value='5'><span></span> <input class='fatigue-radio fatigue9' type="number" name="attr_fatigue_exp" value="0"/> <input class='fat1 fatigue1' type='checkbox' name='attr_fat1_1' value='0'> <input class='fat1 fatigue2' type='checkbox' name='attr_fat1_2' value='0'> <input class='fat1 fatigue3' type='checkbox' name='attr_fat1_3' value='0'> <input class='fat1 fatigue4' type='checkbox' name='attr_fat1_4' value='1'> <input class='fat1 fatigue5' type='checkbox' name='attr_fat1_5' value='2'> <input class='fat1 fatigue6' type='checkbox' name='attr_fat1_6' value='3'> <input class='fat1 fatigue7' type='checkbox' name='attr_fat1_7' value='4'> <input class='fat1 fatigue8' type='checkbox' name='attr_fat1_8' value='5'> <div class='fat1 fatigue9'>6</div> <input class='fat2 fatigue1' type='checkbox' name='attr_fat2_1' value='0'/> <input class='fat2 fatigue2' type='checkbox' name='attr_fat2_2' value='0'/> <input class='fat2 fatigue3' type='checkbox' name='attr_fat2_3' value='0'/> <input class='fat2 fatigue4' type='checkbox' name='attr_fat2_4' value='1'/> <input class='fat2 fatigue5' type='checkbox' name='attr_fat2_5' value='2'/> <input class='fat2 fatigue6' type='checkbox' name='attr_fat2_6' value='3'/> <input class='fat2 fatigue7' type='checkbox' name='attr_fat2_7' value='4'/> <input class='fat2 fatigue8' type='checkbox' name='attr_fat2_8' value='5'/> <div class='fat2 fatigue9'>+3</div> <input class='fat3 fatigue1' type='checkbox' name='attr_fat3_1' value='0'> <input class='fat3 fatigue2' type='checkbox' name='attr_fat3_2' value='0'> <input class='fat3 fatigue3' type='checkbox' name='attr_fat3_3' value='0'> <input class='fat3 fatigue4' type='checkbox' name='attr_fat3_4' value='1'> <input class='fat3 fatigue5' type='checkbox' name='attr_fat3_5' value='2'> <input class='fat3 fatigue6' type='checkbox' name='attr_fat3_6' value='3'> <input class='fat3 fatigue7' type='checkbox' name='attr_fat3_7' value='4'> <input class='fat3 fatigue8' type='checkbox' name='attr_fat3_8' value='5'> <div class='fat3 fatigue9'>+6</div> <input class='fat4 fatigue1' type='checkbox' name='attr_fat4_1' value='0'> <input class='fat4 fatigue2' type='checkbox' name='attr_fat4_2' value='0'> <input class='fat4 fatigue3' type='checkbox' name='attr_fat4_3' value='0'> <div class='fat4 fatigue9'>+9</div> </div> </div> And CSS : .sheet-fatigue-container{ display:grid; grid-template-columns:[fatigue0-start] 70px [fatigue0-end fatigue1-start] 15px [fatigue1-end fatigue2-start] 15px [fatigue2-end fatigue3-start] 15px [fatigue3-end fatigue4-start] 15px [fatigue4-end fatigue5-start] 15px [fatigue5-end fatigue6-start] 15px [fatigue6-end fatigue7-start] 15px [fatigue7-end fatigue8-start] 15px [fatigue8-end fatigue9-start] 30px [fatigue9-end]; grid-template-rows:[radio-start] 30px [radio-end fat1-start] 20px [fat1-end fat2-start] 20px [fat2-end fat3-start] 20px [fat3-end fat4-start] 20px [fat4-end]; grid-gap:2px; font-family: "Comic Sans MS", cursive, sans-serif; } .sheet-fatigue-radio{ grid-row:radio-start / radio-end; } .sheet-fat1{ grid-row:fat1-start / fat1-end; } .sheet-fat2{ grid-row:fat2-start / fat2-end; } .sheet-fat3{ grid-row:fat3-start / fat3-end; } .sheet-fat4{ grid-row:fat4-start / fat4-end; } .sheet-fatigue0{ grid-column:fatigue0-start / fatigue0-end; } .sheet-fatigue1{ grid-column:fatigue1-start / fatigue1-end; } .sheet-fatigue2{ grid-column:fatigue2-start / fatigue2-end; } .sheet-fatigue3{ grid-column:fatigue3-start / fatigue3-end; } .sheet-fatigue4{ grid-column:fatigue4-start / fatigue4-end; } .sheet-fatigue5{ grid-column:fatigue5-start / fatigue5-end; } .sheet-fatigue6{ grid-column:fatigue6-start / fatigue6-end; } .sheet-fatigue7{ grid-column:fatigue7-start / fatigue7-end; } .sheet-fatigue8{ grid-column:fatigue8-start / fatigue8-end; } .sheet-fatigue9{ grid-column:fatigue9-start / fatigue9-end; text-align:center; } .sheet-fatigue-container > input[type=checkbox]{ display:none; } input[type=checkbox].sheet-fatigue1, input[type=checkbox].sheet-fatigue2, input[type=checkbox].sheet-fatigue3, input[type=checkbox].sheet-fatigue9 { display:block; } input[type=radio].sheet-fatigue4:checked ~ input[type=checkbox].sheet-fatigue4, input[type=radio].sheet-fatigue5:checked ~ input[type=checkbox].sheet-fatigue4, input[type=radio].sheet-fatigue5:checked ~ input[type=checkbox].sheet-fatigue5, input[type=radio].sheet-fatigue6:checked ~ input[type=checkbox].sheet-fatigue4, input[type=radio].sheet-fatigue6:checked ~ input[type=checkbox].sheet-fatigue5, input[type=radio].sheet-fatigue6:checked ~ input[type=checkbox].sheet-fatigue6, input[type=radio].sheet-fatigue7:checked ~ input[type=checkbox].sheet-fatigue4, input[type=radio].sheet-fatigue7:checked ~ input[type=checkbox].sheet-fatigue5, input[type=radio].sheet-fatigue7:checked ~ input[type=checkbox].sheet-fatigue6, input[type=radio].sheet-fatigue7:checked ~ input[type=checkbox].sheet-fatigue7, input[type=radio].sheet-fatigue8:checked ~ input[type=checkbox].sheet-fatigue4, input[type=radio].sheet-fatigue8:checked ~ input[type=checkbox].sheet-fatigue5, input[type=radio].sheet-fatigue8:checked ~ input[type=checkbox].sheet-fatigue6, input[type=radio].sheet-fatigue8:checked ~ input[type=checkbox].sheet-fatigue7, input[type=radio].sheet-fatigue8:checked ~ input[type=checkbox].sheet-fatigue8{ display:block; } I would like to add a serie fo vertical checkboxes (some wound counter) on each line of this grid. The goal is that when this specific wound counter is checked, all the checkboxes in the same line need to be disabled (you can still see them but you can click/unclik them anymore). I saw on google it was difficult to diable only trhough CSS so I though just to add a line above the checkboxes like that : <input class='sheet-blessure' type='checkbox' name='attr_blessure_1' value='0'> input[type="checkbox"].sheet-blessure:checked ~ input[type=checkbox].sheet-fat1{ content: "-"; } But it didn't work at all. In fact, nothing I put in this class seems to work... I also saw that it was maybe possible to add a div on top of the line to make the boxes uncheckable but that's far above my skill level. Anyone would have any trick to help me on that ?