Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Pointer-event: none

February 07 (3 years ago)

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;
}
February 07 (3 years ago)

Edited February 07 (3 years ago)
GiGs
Pro
Sheet Author
API Scripter

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





February 07 (3 years ago)
GiGs
Pro
Sheet Author
API Scripter

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

February 07 (3 years ago)

Thank you GIGS! it worked!

February 08 (3 years ago)
GiGs
Pro
Sheet Author
API Scripter

That's great :)