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

Question

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

1

Я пытаюсь включить много переключателей, используя манипуляцию 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 с консолью...

Kalipso 11 янв. 2019, в 01:41

Источник

Теги:

javascript

dom

radio-button

1 ответ

Ещё вопросы

Dacre Denny · Answer 1 · 2019-01-10T22-41-00.000Z

Если я правильно понимаю ваш вопрос, несколько входов 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>

Я пытаюсь использовать консоль Google, но он говорит, что неопределенный ваш код выглядит очень четко, но кажется, что я что-то упустил
Я делаю это, но не ясно, jsfiddle.net/Kalipso/ch8w9s3o
Я делаю скриншот, вы можете увидеть здесь, как это выглядит ibb.co/Rh4c7Bn @ dacre-deny
да именно потому, что сейчас мне нужно нажимать один за другим, чтобы включить их, поэтому я пытаюсь добиться этого
Я запускаю ваш фрагмент, и он отлично работает, но я думаю, что что-то упустил, так как я пробую на живом сайте, и ничего не происходит на консоли, это говорит "undefined"
посмотрите на новый скриншот ibb.co/SVGxB37, как вы можете видеть, я нажимаю на одну кнопку, и ничего не происходит, только кнопка, которую я нажимаю, меняет значение с выключенного на включенное, не понимаю, почему это не работает
@ Kalipso можно ли отправить мне ссылку на сайт в реальном времени, чтобы я мог увидеть, как вы установили скрипт?