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;
}