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

Locking radio buttons

I have a row of radio buttons on my character sheet for each skill to allow the players to select their skill level. I would like to have a lock button so they can lock the radio buttons and not accidentally click on them. Is this a thing that can be done?
1609571752
GiGs
Pro
Sheet Author
API Scripter
The main way to achieve this in roll20, is the Swap/Hide areas CSS trick: <a href="https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas</a> The steps you'd need: Create an action button, have this set a hidden attribute value to 0 (for unlocked) or 1 (for locked). Then have two copies of the radio buttons, one copy having them set to disabled or readonly, and the other copy not. Finally use CSS to hide one copy and show the other, based on the value of the lock toggle hidden attribute created in step 1.
1609788139

Edited 1609788228
This worked well, but I ended up going with the fill bubbles from the left snippet instead of radio buttons, and I cannot figure out how to do this with that. this is what I am using: &lt;fieldset class="repeating_skill"&gt; &nbsp; &nbsp; &nbsp; &lt;div class="dots" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="roll" class="skill-button sheet-block-a" value="#@{skilllevel}"&gt;&lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_skillname" class="txbx" value="New Skill"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="hidden" name="attr_skilllevel" value="0"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span name="attr_skilllevel"&nbsp; class="skill-box"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="hidden" name="attr_skillnumber" class="dot sheet-block-a" value="1"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_skillnumber1" class="dot gt-0 first-dot"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="checked"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_skillnumber2" class="dot gt-0 gt-1"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="checked"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_skillnumber3" class="dot gt-0 gt-1 gt-2"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="checked"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_skillnumber4" class="dot gt-0 gt-1 gt-2 gt-3"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="checked"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_skillnumber5" class="dot gt-0 gt-1 gt-2 gt-3 gt-4"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="checked"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_skillnumber6" class="dot gt-0 gt-1 gt-2 gt-3 gt-4 gt-5"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="checked"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_skillnumber7" class="dot gt-0 gt-1 gt-2 gt-3 gt-4 gt-5 gt-6"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="checked"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_skillnumber8" class="dot gt-0 gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="checked"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_skillnumber9" class="dot gt-0 gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="checked"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button type="action" name="act_skillnumber10" class="dot gt-0 gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="checked"&gt;&lt;/span&gt;&lt;span class="checked"&gt;&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;/fieldset&gt; With css: .sheet-dots{ &nbsp; display:flex; &nbsp; height:1.2em; } .sheet-dots:hover { &nbsp; &nbsp; background-color:#FFFFBB; } /* Configure the button styling. This example makes it look like a radio. */ button.sheet-dot { &nbsp; margin:0; &nbsp; padding: 0px; &nbsp; border: ridge 2px ; &nbsp; cursor: pointer; &nbsp; width: 11px; &nbsp; height: 11px; &nbsp; border-radius: 50%; &nbsp; display: flex; &nbsp; justify-content: center; &nbsp; align-items: center; } button.sheet-first-dot { &nbsp; &nbsp; opacity:.4; } button.sheet-dot &gt; span { &nbsp; width: 10px; &nbsp; height: 10px; &nbsp; border-radius: 50%; &nbsp; background: black; } /* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */ input.sheet-dot[value="0"] ~ button.sheet-gt-0 &gt; span.sheet-checked { &nbsp; display: none; } input.sheet-dot[value="1"] ~ button.sheet-gt-1 &gt; span.sheet-checked { &nbsp; display: none; } input.sheet-dot[value="2"] ~ button.sheet-gt-2 &gt; span.sheet-checked { &nbsp; display: none; } input.sheet-dot[value="3"] ~ button.sheet-gt-3 &gt; span.sheet-checked { &nbsp; display: none; } input.sheet-dot[value="4"] ~ button.sheet-gt-4 &gt; span.sheet-checked { &nbsp; display: none; } input.sheet-dot[value="5"] ~ button.sheet-gt-5 &gt; span.sheet-checked { &nbsp; display: none; } input.sheet-dot[value="6"] ~ button.sheet-gt-6 &gt; span.sheet-checked { &nbsp; display: none; } input.sheet-dot[value="7"] ~ button.sheet-gt-7 &gt; span.sheet-checked { &nbsp; display: none; } input.sheet-dot[value="8"] ~ button.sheet-gt-8 &gt; span.sheet-checked { &nbsp; display: none; } input.sheet-dot[value="9"] ~ button.sheet-gt-9 &gt; span.sheet-checked { &nbsp; display: none; } input.sheet-dot[value="10"] ~ button.sheet-gt-10 &gt; span.sheet-checked { &nbsp; display: none; }