Как включить отключение нескольких элементов DOM с помощью Javascript

Question

Я пытаюсь включить многие переключатели, используя манипуляцию DOM, чтобы каждый раз не нажимать на все кнопки, чтобы включить их.

Я пытаюсь это:

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

и

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

Без успеха. Я думаю, что я делаю не так? Мой HTML выглядит так:

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

Код всегда один и тот же примерно в 60 раз, поэтому, если бы я мог включить все в одном кадре, было бы проще. Я пытаюсь это с помощью инструмента Google Dev с консоли ...

Answer 1

Если я правильно понимаю ваш вопрос, несколько checkbox входов в вашем HTML могут быть отключены и включены с помощью следующих методов DOMElement;

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

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

В сочетании с document.querySelectorAll() вы можете достичь того, что вам требуется, следующим образом:

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>

Обновление

Для достижения обновленного поведения переключения, упомянутого в комментариях ниже, см .:

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