How to enable disable multiple DOM elements using Javascript

Question

I'm trying to enable many radio buttons using DOM manipulation to avoid click each time on all buttons to enable them.

I try this:

document.getElementById("on").disabled = true;

and:

on-off-btn.off.active.setAttribute("enable", "");

Without success. I think I'm doing wrong? My HTML looks like this:

    <form>
    <div class="on-off-wrapper">
    <fieldset class="enabled">
    <div label="On" title="on" class="on-off-btn on active">
    <input type="radio" id="on" name="on_off" value="on"> 
    <span>On</span></div>
    <div label="Off" title="off" class="on-off-btn off">
    <input type="radio" id="off" name="on_off" value="on"> 
    <span>Off</span></div></fieldset></div>
    </form>

The code is always same about 60 time like this so this is why if I can enable all in one shot would be more simple. I try this using the google dev tool with the console...

Dacre Denny · Answer 1 · 2019-01-14T19:58:16.537

If I understand your question correctly, multiple checkbox inputs in your HTML can be disabled and enabled via the following DOMElement methods;

// To set input disabled 
element.setAttribute("disabled", "disabled") 

// To set input enabled
element.removeAttribute("disabled")

Combined with document.querySelectorAll(), you can achieve what you require as follows:

function disableAll() {

  // Select all inputs with name attribute of value on_off and iterate 
  // applying disabled attribute
  document.querySelectorAll('input[name="on_off"]').forEach(element => {

    element.setAttribute("disabled", "disabled");
  });
}

function enableAll() {

  // Select all inputs with name attribute of value on_off and iterate 
  // removing disabled attribute (to enable)
  document.querySelectorAll('input[name="on_off"]').forEach(element => {

    element.removeAttribute("disabled");
  });
}

<form>
  <div class="on-off-wrapper">
    <fieldset class="enabled">
      <div label="On" title="on" class="on-off-btn on active">
        <input type="radio" id="on" name="on_off" value="on">
        <span>On</span></div>
      <div label="Off" title="off" class="on-off-btn off">
        <input type="radio" id="off" name="on_off" value="on">
        <span>Off</span></div>
    </fieldset>
  </div>
</form>

<button onclick="enableAll()">Enable All</button>
<button onclick="disableAll()">Disable All</button>

Update

To achieve the updated toggle behavior mentioned in the comments below, see this:

// Select all radio buttons
document.querySelectorAll('input[type="radio"]').forEach(function(input) {

  // When any radio button is clicked
  input.addEventListener('click', function() {

    // 1. Reset all radio buttons to unchecked state
    document.querySelectorAll('input[type="radio"]')
      .forEach(function(reset) {
        reset.checked = false;
      });

    // 2. Create a CSS selector to select all radio buttons that match the .on or .off
    //    parent of the current radio button being clicked
    const selector = (input.parentElement.classList.contains('on') ? '.on' : '.off') +
      ' input[type="radio"]';

    // 3. Select all radio buttons by selector (ie those that match this radio buttons
    //    .on or .off parent), and set to checked
    document.querySelectorAll(selector).forEach(function(set) {
      set.checked = true;
    });
  })
});

<form>
  <div class="on-off-wrapper">
    <fieldset class="enabled">
      <div label="On" title="on" class="on-off-btn on active">
        <input type="radio" id="on" name="on_off" value="on">
        <span>On</span></div>
      <div label="Off" title="off" class="on-off-btn off">
        <input type="radio" id="off" name="on_off" value="on">
        <span>Off</span></div>
    </fieldset>
  </div>
</form>
<form>
  <div class="on-off-wrapper">
    <fieldset class="enabled">
      <div label="On" title="on" class="on-off-btn on active">
        <input type="radio" id="on" name="on_off" value="on">
        <span>On</span></div>
      <div label="Off" title="off" class="on-off-btn off">
        <input type="radio" id="off" name="on_off" value="on">
        <span>Off</span></div>
    </fieldset>
  </div>
</form>
<form>
  <div class="on-off-wrapper">
    <fieldset class="enabled">
      <div label="On" title="on" class="on-off-btn on active">
        <input type="radio" id="on" name="on_off" value="on">
        <span>On</span></div>
      <div label="Off" title="off" class="on-off-btn off">
        <input type="radio" id="off" name="on_off" value="on">
        <span>Off</span></div>
    </fieldset>
  </div>
</form>
<form>
  <div class="on-off-wrapper">
    <fieldset class="enabled">
      <div label="On" title="on" class="on-off-btn on active">
        <input type="radio" id="on" name="on_off" value="on">
        <span>On</span></div>
      <div label="Off" title="off" class="on-off-btn off">
        <input type="radio" id="off" name="on_off" value="on">
        <span>Off</span></div>
    </fieldset>
  </div>
</form>

I try using the google console but it say undefined your code look very clear but it seems Im missing something — Kalipso, Jan 11 '19 at 10:54
I make a screenshot you can see here how it look https://ibb.co/Rh4c7Bn @dacre-deny — Kalipso, Jan 13 '19 at 18:49
yes exactly because right now I need to click one by one to enable them this is why I try to acchieve this — Kalipso, Jan 14 '19 at 13:59
I run you snippet and it work great but I think I miss something since I try on the live site and nothing happen on the console it say "undefined" — Kalipso, Jan 15 '19 at 11:54
see the new screenshot https://ibb.co/SVGxB37 as you can see I click on one button and nothing happen only the button I click change from off to on don't understand why it's not working — Kalipso, Jan 15 '19 at 12:13
@Kalipso is it possible to send me a link to the live site, so i can see how you have installed the script? — Dacre Denny, Jan 15 '19 at 19:42

How to enable disable multiple DOM elements using Javascript

1 Answers1

Update