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

Block Switch

January 15 (4 years ago)
Ray
Pro

I am customizing an existing character sheet from the github repository.

I want to make an input field readonly using a block switch when the value of another input field is equal to a specific value.

i.e.  Field1 = 0 - Field2 = readonly , Field1 = 1 - Field2 = not readonly

Can anyone describe the process for this as i have only used block switch with checkboxes


Cheers

Ray

January 15 (4 years ago)

Edited January 15 (4 years ago)
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator

. sheet-im_an_input[value='lock'] ~ . sheet-im_another_input {pointer-events: none;}


You can't disable an input via css but you can make them unselectable which accomplishes much of the same effect. 

January 15 (4 years ago)

Edited January 15 (4 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

Edit: that pointer-event method is easier, and should be added to the CSS Wizardry page.

You can't change if an input is readonly or not, but you could use the "swap visible area" trick to switch between showing the <input> or a <span> that is made to look similar.

January 16 (4 years ago)
Ray
Pro

Thanks guys....I will look at this  :)

January 16 (4 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

After some testing & playing around, I've now created an example on the wiki for Disable click/select, along with a gif: https://wiki.roll20.net/CSS_Wizardry#Disable_Click


Note: Neither pointer-events nor user-select stops users from selecting the element using the TAB-key, and editing them with through that(writing in text/number-inputs, use up/down keys can change select options, space can check/uncheck checkbox/radio inputs, pressing Enter with button activates it).

So while this method is easier, the other method I described are more "absolute", and can more rigorously disable accidental or intentional edits of these stats.