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...

Answer 1

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>