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 !