make one checkbox enable all others purely with javascript

Question

I'm really struggling with this. I want to use Jquery for this but it's not allowed unfortunately. So for a little exercise I need to let one checkbox check enable all other checkboxes. No it doesn't need to check them but just enable them. Here is my HTML code:

<table border="0">
   <tr>
    <th id="thproductid"; colspan="2"; width="300px">Pizza</th>
    <th id="thproductid"; colspan="2"; width="150px"><input type="checkbox" name="pizzamedium" id="checkpizzamedium" onclick="Activeer(this)"> Medium</th>
    <th id="thproductid"; colspan="3"; width="50px">Aantal</th>
    <th width="100px"></th>
    <th id="thproductid"; colspan="2"; width="150px"><input type="checkbox" name="pizzalarge" id="checkpizzalarge" onclick="Activeer(this)"> Large</th>
    <th id="thproductid"; colspan="3"; width="50px">Aantal</th>
    <th width="100px"></th>
   </tr>
   <tr>
    <th id="tdid">1</th>
    <td id="tdproductid"> Margeritha</td>
    <td id="tdprijsid"> &#8364 7,50</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Margeritham" value="Pizza Margeritha M" onclick="" disabled></td>
    <td><input type="button" id="plusknopmargerithaM" value=" + " onclick="" disabled></td>
    <td><input type="button" id="minknopmargerithaM" value=" - " onclick="" disabled></td>
    <td><input type="text" size="5" name="aantalpizzasmargerithaM" id="aantalpizzasmargerithaM" value="0" disabled></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input disabled type="button" id="bestelknopmargarithaM" value="Toevoegen" onclick=""></td>
    <td id="tdprijsid"> &#8364 12,00</td>
    <td id="tdcheckboxid"><input disabled type="checkbox" name="pizzalarge" id="Margerithal" value="Pizza Margeritha L" onclick=""></td>
    <td><input disabled type="button" id="plusknopmargerithaL" value=" + " onclick=""></td>
    <td><input disabled type="button" id="minknopmargerithaL" value=" - " onclick=""></td>
    <td><input disabled type="text" size="5" name="aantalpizzasmargerithaL" id="aantalpizzasmargerithaL" value="0"></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input disabled type="button" id="bestelknopmargarithaL" value="Toevoegen" onclick=""></td>
   </tr>
   <tr>
    <th id="tdid">2</th>
    <td id="tdproductid"> Bolognaise</td>
    <td id="tdprijsid"> &#8364 9,00</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Bolognaisem" value="Pizza Bolognaise M" onclick="" disabled></td>
    <td><input disabled type="button" id="plusknopbolognaiseM" value=" + " onclick=""></td>
    <td><input disabled type="button" id="minknopbolognaiseM" value=" - " onclick=""></td>
    <td><input type="text" disabled size="5" name="aantalpizzasbolognaiseM" id="aantalpizzasbolognaiseM" value="0"></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" disabled id="bestelknopbolognaiseM" value="Toevoegen" onclick=""></td>
    <td id="tdprijsid"> &#8364 13,50</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzalarge" id="Bolognaisel" value="Pizza Bolognaise L" onclick="" disabled></td>
    <td><input type="button" id="plusknopbolognaiseL" value=" + " onclick="" disabled></td>
    <td><input type="button" id="minknopbolognaiseL" value=" - " onclick="" disabled></td>
    <td><input type="text" size="5" name="aantalpizzasbolognaiseL" id="aantalpizzasbolognaiseL" value="0" disabled></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" id="bestelknopbolognaiseL" value="Toevoegen" onclick="" disabled></td>
   </tr>
   <tr>
    <th id="tdid">3</th>
    <td id="tdproductid"> Calzone</td>
    <td id="tdprijsid"> &#8364 10,00</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Calzonem" value="Pizza Calzone M" onclick="" disabled></td>
    <td><input type="button" id="plusknopcalzoneM" value=" + " onclick="" disabled></td>
    <td><input type="button" id="minknopcalzoneM" value=" - " onclick="" disabled></td>
    <td><input type="text" size="5" name="aantalpizzascalzoneM" id="aantalpizzascalzoneM" value="0" disabled></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" id="bestelknopcalzoneM" value="Toevoegen" onclick="" disabled></td>
    <td id="tdprijsid"> &#8364 16,50</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzalarge" id="Calzonel" value="Pizza Calzone L" onclick="" disabled></td>
    <td><input type="button" id="plusknopcalzoneL" value=" + " onclick="" disabled></td>
    <td><input type="button" id="minknopcalzoneL" value=" - " onclick="" disabled></td>
    <td><input type="text" size="5" name="aantalpizzascalzoneL" id="aantalpizzascalzoneL" value="0" disabled></td>
    <td id="tdtoevoegenknopid"; align="center" class="verstopt"><input type="button" id="bestelknopcalzoneL" value="Toevoegen" onclick="" disabled></td>
   </tr>
   <tr>
    <th id="tdid">4</th>
    <td id="tdproductid"> Pollo</td>
    <td id="tdprijsid"> &#8364 10,00</td>
    <td id="tdcheckboxid"><input type="checkbox" name="pizzamedium" id="Pollom" value="Pizza Pollo M" onclick="" disabled></td>
    <td><input type="button" id="plusknoppolloM" value=" + " onclick..

Here is my JS code:

function Activeer(adres, checkbox1id, checkbox2id, checkbox3id, checkbox4id, checkbox5id, checkbox6id, checkbox7id, checkbox8id) {
    if(adres.checked) {
        document.getElementById(checkbox1id).disabled = "";
  document.getElementById(checkbox2id).disabled = "";
  document.getElementById(checkbox3id).disabled = "";
  document.getElementById(checkbox4id).disabled = "";
  document.getElementById(checkbox5id).disabled = "";
  document.getElementById(checkbox6id).disabled = "";
  document.getElementById(checkbox7id).disabled = "";
  document.getElementById(checkbox8id).disabled = "";
    }
}

Did you define your JS code inside the HTML, or properly import it if not? This error means that when you click on the check box, the browser does not know where your 'Activeer' function is. It can't find it. — Ryan, Oct 02 '16 at 19:04
Also, don't use tables for styling. The problem is the fact that setting the attribute `disabled` to an empty string keeps the attribute. You'll need to completely remove it instead. — Maarten Bicknese, Oct 02 '16 at 19:05
Try using `removeAttribute` instead like this `document.getElementById(checkbox1id).removeAttribute("disabled")` — Robiseb, Oct 02 '16 at 19:06
Possible duplicate of [javascript remove "disabled" attribute to html input](http://stackoverflow.com/questions/11719961/javascript-remove-disabled-attribute-to-html-input) — Maarten Bicknese, Oct 02 '16 at 19:09

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Give all of your checkboxes the same class, ~~then assign every checkbox but one the disabled attribute.~~*

EDIT

*No need to hardcode the disabled attribute, the demo has the capability to programmatically change the state of the checkboxes now.

I added a JavaScript solution and commented out the jQuery, if you'd like to test it out as well, just remove the comment marks and place them on the JS function.

var chxs = document.querySelectorAll('.chx');

var check = document.querySelector('input[type="checkbox"]');

check.addEventListener('change', function() {
  var chxArr = Array.prototype.map.call(chxs, function(obj, i) {

    if (obj.getAttribute('disabled')) {
      return obj.removeAttribute('disabled');
    } else {
      return obj.setAttribute('disabled', true);
    }
  });
}, false);

Details are commented in the source of the following Snippet:

SNIPPET

/*
$('.chx').on('change', function() {
  $('.chx').removeAttr('disabled');
});
*/

// Collect all elements with class .chx into a NodeList
var chxs = document.querySelectorAll('.chx');

// Reference the first checkbox found
var check = document.querySelector('input[type="checkbox"]');

/*
| - Add an eventListener to the first checkbox
| - If a change event fires on the checkbox...
*/
check.addEventListener('change', function() {

  /*
  | - Convert the NodeList chxs into an array called chxArr with
  | map and call methods.
  | - On each iteration...
  */
  var chxArr = Array.prototype.map.call(chxs, function(obj, i) {

    /*
    | - If the checkbox(obj) has the attribute "disabled"...
    | -...remove the "disabled" attribute...
    | - ...otherwise add the "disabled attribute to it.
    */
    if (obj.getAttribute('disabled')) {
      return obj.removeAttribute('disabled');
    } else {
      return obj.setAttribute('disabled', true);
    }
    // Lather, rinse, and repeat...
  });
}, false);

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>CHX</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div>ENABLE/DISABLE ALL
    <input type='checkbox'>
  </div>

  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>
  <input type='checkbox' class='chx'>
  <br/>

</body>

</html>

In the title it says _"purely with javascript"_ and you're using **jQuery**. — Angel Politis, Oct 02 '16 at 19:21
It is JavaScript though. Ignoring that, using the same class and looping over them is a much nicer easy way than hard coding each check boxes id. — NickSlash, Oct 02 '16 at 19:27
@NickSlash ok review it now. It will enable/disable smoothly. — zer00ne, Oct 02 '16 at 19:57

Angel Politis · Answer 2 · 2016-10-02T19:44:41.273

Notes about your code:

Hardcoding the process is the last thing you'd want to do in this case.
Setting element.disabled = "" doesn't remove the attribute and the element will stay disabled nonetheless.

Solution:

I didn't want to change too much the code you already have, so I went ahead and removed the hardcoding you've done by using a for loop to iterate through the elements you pass as arguments (except the first one [adres]) and disabling them one-by-one.

I also changed element.disabled = "" to element.removeAttribute("disabl‌ed"), because as mentioned above, the former doesn't actually remove the attribute.

function Activeer() {
  var
    adres = arguments[0], /* The first argument should be adres */
    args = [].slice.call(arguments, 1); /* Every element you want enabled */

  if (adres.checked) {
    for (var i = 0; i < args.length; i++) args[index].removeAttribute("disabl‌ed");
  }
}

One last note:

I believe this solution will work as you want, but I'd still encourage you to use a common attribute though (like the same class or name), as everything will be significantly simpler since you want have to pass countless arguments for each element you want enabled.

Example:

Let's suppose you give them a class: class = "checkboxes".

function Activeer(adres) {
  var elements = document.querySelectorAll(".checkboxes");
  if (adres.checked) for (var i = 0; i < elements.length; i++) {
      args[index].removeAttribute("disabl‌ed");
  }
}

make one checkbox enable all others purely with javascript

2 Answers2

EDIT

SNIPPET