How to set readonly attributes to input with checkbox

Hi, Is it possible to set an input as readonly when a checkbox is checked? I know that there is action button and onClick function but can we change attributes other than "name" and "value" ? Thanks

The way I would handle that is toggle between the input and a named span. So, if the checkbox is not checked, display the input <input type="text" name="attr_myinput" /> And if the checkbox is checked, then hide the input and display something like this: <span name="att_myinput"></span>

Here's a basic example that swaps an editable input with a read-only span; <!--HTML--> Edit/Lock: <input class="edit" type="checkbox" name="attr_edit_flag" value="1" /> <div> Foo 01: <input type="number" name="attr_foo_01" value="10" /> <span class="readonly" name="attr_foo_01"></span> </div> <div> Foo 02: <input type="number" name="attr_foo_02" value="10" /> <span class="readonly" name="attr_foo_02"></span> </div> <!--CSS--> input.sheet-edit[type=checkbox]:not(:checked) ~ div > input {display:inline-block;} input.sheet-edit[type=checkbox]:not(:checked) ~ div > input + span.sheet-readonly {display:none;} input.sheet-edit[type=checkbox]:checked ~ div > input {display:none;} input.sheet-edit[type=checkbox]:checked ~ div > input + span.sheet-readonly {display:inline-block;}

This is the way. Personally, I'd use a readonly input instead of a span, so the appearance changes very little (just gets the grey shading of readonly).

Thank you, I used that way and it works perfectly !