Lock/unlock form with toggle

Question

I'm looking for a way to have a button toggeling the field of my form. When "locking" the form with the toggle button no data can be typed. When "unlocking" data should be allowed to be typed. What I want to achieve with this is simple avoiding users to accidentally type.

I found the code below and it works. Only problem is that it only applies to one input field. I want it to work on more that one.

<input type="checkbox" id="yourBox">
<input type="text" id="yourText">
<script>
document.getElementById('yourBox').onchange = function() {
    document.getElementById('yourText').disabled = this.checked;
};
</script>

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

Mark the fields you want to disable with a CSS class, and then use jQuery to disable them.

jQuery - Disable Form Fields

If you want a pure Javascript solution, just repeat this line

document.getElementById('yourText').disabled = this.checked;

for each field.

Or, you can do something like this this: How to Get Element By Class in JavaScript?. Note that you can assign multiple CSS classes to the same field, so assign another class to identify those fields that need to be disabled.

edited May 23 '17 at 12:31

Community

1
1

answered Aug 08 '13 at 22:28

Robert Harvey

178,213
47
333
501

If the code provided uses plain old JS, better to provide a plain old JS solution? – Chris Brown Aug 08 '13 at 22:29
Is there another way? I already use the class for css style :/ – user2662616 Aug 08 '13 at 22:30
@user2662616 Your elements have IDs, but not classes – Chris Brown Aug 08 '13 at 22:32
Well the class I use for css style is just not in the example in the post. – user2662616 Aug 08 '13 at 22:35
like that? – user2662616 Aug 08 '13 at 22:40

Lock/unlock form with toggle

1 Answers1