Thanks for your quick reply. You seem to be right, I just reduced my original sheet to a minimum for demonstration and it now works as expected. I need to do some testing since I removed a lot... but here's the basic code to show you what I did (again, simplified for demonstration; e.g. click on +/- should un-/tick the checkbox): HTML: <div>
<fieldset class="section weapon">
<legend>
<label>
<input class="invisible" style="display:none" type="checkbox" name="attr_section_weapon_visible" value="1" checked>
<span>Weapon</span> (<span>+</span><span>-</span>)
</label>
</legend>
<input class="invisible" type="checkbox" value="(@{section_weapon_visible})" checked>
<div class="flex header">
<span class="col1" >Weapon</span>
<span class="col2" title="Melee attack or Ranged attack">Type</span>
<span class="col3" title="Weapon bonus" >WB</span>
<span class="col4" title="Magic bonus" >MB</span>
<span class="col5" title="Opponent's defense" >OD</span>
<span class="col6" title="1H = one-handed, 2H = two-handed, ...">Hands</span>
<span class="col7" >Special</span>
</div>
<fieldset class="repeating_weapon">
<div class="flex">
<div class="col1">
<input type="text" name="attr_weapon_name">
</div>
<div class="col2 img-select">
<label>
<input type="radio" name="attr_weapon_type" value="mat" checked>
<span class="melee-attack" title="Melee attack"></span>
</label>
<label>
<input type="radio" name="attr_weapon_type" value="rat">
<span class="ranged-attack" title="Ranged attack"></span>
</label>
<label>
<input type="radio" name="attr_weapon_type" value="mra">
<span class="both-attack" title="Both"></span>
</label>
</div>
<input class="col3" type="text" name="attr_weapon_mb_weapon_bonus">
<input type="hidden" name="attr_weapon_bonus">
<input class="col4" type="text" name="attr_weapon_magic_bonus">
<input class="col5" type="text" name="attr_weapon_mb_opponent_defense">
<input type="hidden" name="attr_weapon_opponent_defense">
<input class="col6" type="text" name="attr_weapon_hands" title="@{weapon_hands}">
<input class="col7" type="text" name="attr_weapon_special" title="@{weapon_special}">
</div>
</fieldset>
</fieldset>
</div>
CSS: .charsheet {
background-color: rgb(115,82,49);
padding: 5px;
min-width: 760px;
}
.charsheet > div {
min-width: 750px;
max-width: 1500px;
margin: 0 auto;
padding: 5px;
background-color: white;
}
.charsheet * {
font-family: Arial;
font-size: 16px;
padding: 0;
margin: 0;
white-space: nowrap;
flex-shrink: 0;
box-sizing: border-box;
}
.charsheet legend {
margin-left: 5px;
}
.charsheet button {
cursor: pointer;
}
.charsheet input:disabled {
background-color: white;
border: none;
color: black;
}
.charsheet textarea {
width: 100%;
resize: none;
display: block;
height: 60px;
border: none;
white-space: pre-wrap;
}
.charsheet > div > fieldset {
padding: 5px;
}
fieldset fieldset {
border: none;
}
.charsheet *[title] {
font-style:italic;
text-decoration: underline;
}
.charsheet .sheet-invisible:checked ~ span:nth-child(3),
.charsheet .sheet-invisible:not(:checked) ~ span:nth-child(4),
.charsheet label + input:not(:checked) ~ * {
display: none;
}
.sheet-flex {
display: flex;
}
.charsheet .sheet-img-select {
display: flex;
flex-direction: column;
}
.charsheet .sheet-img-select input {
display: none;
}
.charsheet .sheet-img-select:hover label {
cursor: pointer;
}
.charsheet .sheet-img-select span {
height: 18px;
display: block;
background-size: auto 18px;
background-repeat: no-repeat;
background-position: center center;
}
.charsheet .sheet-img-select:hover input:not(:checked) + span {
opacity: 0.5;
}
.charsheet .sheet-img-select:not(:hover) input:not(:checked) + span {
display: none;
}
.charsheet .sheet-header * {
font-size: 16px !important;
font-weight: normal;
background-color: rgb(230, 230, 230);
}
.charsheet .sheet-weapon .sheet-flex > * {
border: 1px solid black;
padding: 2px;
font-size: 14px;
}
.charsheet .sheet-weapon .sheet-col1 {
width: 200px;
}
.charsheet .sheet-weapon .sheet-col1 input[type=text] {
width: 160px;
border: none;
}
.charsheet .sheet-weapon .sheet-col1 label input {
display: none;
}
.charsheet .sheet-weapon .sheet-col2,
.charsheet .sheet-weapon .sheet-col3,
.charsheet .sheet-weapon .sheet-col4,
.charsheet .sheet-weapon .sheet-col5 {
width: 55px;
text-align: center;
}
.charsheet .sheet-weapon .sheet-col6 {
width: 55px;
text-align: center;
}
.charsheet .sheet-weapon .sheet-col7 {
width: 80px;
flex-grow: 3;
}
