Pointer-event: none

Hello, I'am trying to implement the disable click example of the CSS Wizardry:  2.2 Disable Click I do not understand how to make it happen. I also look at some other sheets and I can't make it work. My goal is to "disable" a input type number when a checkbox is checked: Thank you in advance INPUT: < input type = "number" name = "attr_vitalidade" value = "5" min = "0" max = "5" class = "sheet-vitalidade" /> CHECKBOX: < input type = "checkbox" name = "attr_debFisica" value = "-1" class = "sheet-debVitalidade" > CSS: input [ type = "checkbox" ] .sheet-debVitalidade:checked ~ input [ type = "number" ] .sheet-vitalidade { pointer-events : none ; }

You need to create 2 copies of the button, one with astyle that has pointer events disabled, and then swutch between them with a sheet worker and CSS rule. <input type="hidden" name="attr_debFisica" value="0" class="sheet-debVitalidade"> <input type="number" name="attr_vitalidade" value="5" min="0" max="5" class="sheet-can-click"/> <input type="number" name="attr_vitalidade" value="5" min="0" max="5" class="sheet-vitalidade"/> <input type="checkbox" name="attr_debFisica" value="-1" class="sheet-debVitalidade"> You need a hidden copy of the checkbox before the other inputs, because the CSS requires that value before them. Then in your CSS, you first have rule to hide and show those buttons, based on the checkbox value. input:not([value="0"]).sheet-debVitalidade ~ input.sheet-can-click, input[value="0"].sheet-debVitalidade ~ input.sheet-vitalidade {     display: none; } When the button is unchecked, it hides one input, when its checked, it hides the other. (I might have the order switched here, I'm sleepy and havn't thought it through). Then a modified version of your CSS rule above will give the goal you intend: input [ type = "number" ] .sheet-vitalidade { pointer-events : none ; }

Note: I used [value="0"], you can use :checked too, I just used the one I use most.

Thank you GIGS! it worked!

That's great :)