Enable/Disable group of form input elements with a checkbox

Question

I want a checkbox that can enable (when checked) or disable (when unchecked) a group of input form elements. I have managed to do it with only one single element but I am struggling to do it with several elements. Here is my code:

Javascript:

function myFunction() {

var elements = document.getElementsByClassName("child1");
var el = document.getElementById("myCheck");

for(var i=0; i<elements.length; i++) {

 if(el.checked) {
    elements[i].removeAttribute("disabled");
    } else {
    elements[i].setAttribute("disabled","disabled");
    }
}
}

HTML

<input type="checkbox" id="myCheck" onChange="myFunction()">Click the button to disable the form input elements<br>


<input type="radio" class="child1" name="group1" disabled="disabled">
<input type="radio" class="child1" name="group1" disabled="disabled">
<input type="radio" class="child1" name="group1" disabled="disabled">
<br>
<input type="radio" class="child1" name="group2" disabled="disabled">
<input type="radio" class="child1" name="group2" disabled="disabled">
<input type="radio" class="child1" name="group2" disabled="disabled">
<br>
<input type="text" class="child1" disabled="disabled">

(I have used getElementsByClassName as I understand that you can only have one ID by html page (i.e. getElementById would not work)).

JSFIDDLE https://jsfiddle.net/w2992L1y/

I don't know pure js so I can't give you an answer but I can give you the fundamentals as a comment - what you want to do, is, add an eventListener onto the checkbox, when clicked, do a foreach statement on a mutual class name and add the disabled property. — treyBake
– treyBake, Commented Jul 17, 2017 at 16:19
also, don't use inline js - it's bad practice that leads to hard-to-maintain code — treyBake
– treyBake, Commented Jul 17, 2017 at 16:20

Prerak Sola · Accepted Answer · 2017-07-17 16:33:32Z

4

The disabled attribute does not have a value associated with it. So to disable an input element you only need to do <input disabled>. Similarly to enable/disable the input element using JavaScript you need to do:

element.disabled = true;  //disable
element.disabled = false;  //enable

For your example you could do like below:

function myFunction() {

  var elements = document.getElementsByClassName("child1");
  var el = document.getElementById("myCheck");

  for (var i = 0; i < elements.length; i++) {
    if (el.checked) {
      elements[i].disabled = true;
    } else {
      elements[i].disabled = false;
    }
  }
}

<input type="checkbox" id="myCheck" onChange="myFunction()">Click the button to disable the form input elements
<br>

<input type="radio" class="child1" name="group1">
<input type="radio" class="child1" name="group1">
<input type="radio" class="child1" name="group1">
<br>
<input type="radio" class="child1" name="group2">
<input type="radio" class="child1" name="group2">
<input type="radio" class="child1" name="group2">
<br>
<input type="text" class="child1">

Here's the working fiddle of the same: https://jsfiddle.net/prerak6962/g96j4g7g/2/

answered Jul 17, 2017 at 16:33

Prerak Sola

10.1k8 gold badges39 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Heretic Monkey Over a year ago

Or even elements[I].disabled = el.checked, if you're into that whole brevity thing.

robbit Over a year ago

As an alternative, you could group the radio buttons with a <fieldset>. This tag has a disabled-property, which disables all contained input fields: developer.mozilla.org/de/docs/Web/HTML/Element/fieldset

Collectives™ on Stack Overflow

Enable/Disable group of form input elements with a checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related