It is possible to do this with CSS and a sheet worker. You need all the checkboxes created in html first, and each checkbox needs a hidden input that is set to 0 or 1 based on the value of the max button. Each hidden input would have a class, and each heckbox would have a different class.
Your HTML would look like this (notice the addition of classes)
<input type="number" name="attr_stress_max" class="max" style="width:40px;" value="0"/>
<input type="hidden" name="attr_stress_1" class="stress-toggle" value="1"/>
<input type=checkbox class="buttons" name="attr_stress_chk1">
<input type="hidden" name="attr_stress_2" class="stress-toggle" value="1"/>
<input type=checkbox class="buttons" name="attr_stress_chk2">
<input type="hidden" name="attr_stress_3" class="stress-toggle" value="1"/>
<input type=checkbox class="buttons" name="attr_stress_chk3">
<input type="hidden" name="attr_stress_4" class="stress-toggle" value="1"/>
<input type=checkbox class="buttons" name="attr_stress_chk4">
<input type="hidden" name="attr_stress_5" class="stress-toggle" value="1"/>
<input type=checkbox class="buttons" name="attr_stress_chk5">
<input type="hidden" name="attr_stress_6" class="stress-toggle" value="1"/>
<input type=checkbox class="buttons" name="attr_stress_chk6">
Seeing your HTML like this makes me think you should wrap the whole repeating section contents in a div, use CSS Grid to manage the columns and spacing, and get rid of the . Ignoring that for now though.
Then in CSS, you'd need this:
.stress-toggle[value="0"] + .buttons {
display: none;
}
Notice the use of + there. That means the class affects only the element directly following it. So the stress_5 box affects only the checkbox immediately after it. This means you only need one copy of the above CSS, and it works for all rows and all buttons.
Finally, to make it work, you need a sheet worker, which respods to your stress_max value and updates all the hidden inputs.
on{`change:repeating_stress:stress_max`, () => {
getAttrs('repeating_stress_stress_max', v => {
const limit = +v[repeating_stress_stress_max] || 0;
const output = {};
[1,2,3,4,5,6].forEach(i => {
output[`repeating_stress_stress_chk${i}`] = (i <= limit) ? 1 : 0;
});
setAttrs(output);
});
});
This will automatically update the row you changed stress_max on, changing the hidden input values, so that those equal to or below its value are set to . This also handles pcs who enter a vakue greater than 6, which is very possible.
Edit: I see I've been ninja'd by Scott with a more elegant solution :) (Ninja Turtled maybe - I shouldn't keep these tabs open while i look at other things...)