Javascript: включить кнопки на флажке 'check (оба с ElementsByClass)

Dysadia спросил: 13 июня 2018 в 07:50 в: javascript

У меня на самом деле довольно простой вопрос, но я пробовал уже два дня, и я просто не нахожу ответа Мне нужно, или, может быть, я просто не понимаю.

Это моя проблема: у меня есть две строки в таблице:

  1. row checkbox

  2. строка строка

Я хочу, чтобы кнопка была включена, если флажок в той же строке включен. понимание

<input type="checkbox" class="isaimed" name="attr_targeted_checkbox1">
<button type='roll' class="isroll" disabled="true">

Я использую классы и наткнулся на getElementsByClassName и тот факт, что вы получаете массив / узел объектов. Я пробовал что-то вроде этого:

var buttons = document.getElementsByClassName('isroll')
var keyselects = document.getElementsByClassName('isaimed');for (var i = 0; i < keyselects.length; i++) {
    if (keyselects[i].checked == true) {
        buttons[i].disabled = false;
        break;
    }
}

и, как и 20 других кодов и функций, которые я нашел в Интернете, но он не работает. Может быть, мне нужно назначить строки или что-то в этом роде? Действительно, я просто отчаянно, и мой ум полон кусков прямо сейчас.

Большое спасибо за вашу помощь!

fiddle


1 ответ

Есть решение
LGSon ответил: 13 июня 2018 в 08:53

Вам нужно добавить addEventListener к вашему input для обнаружения, когда на них нажимают.

Затем с помощью nextElementSibling, вы получаете button и можете переключать его состояние.

Фрагмент стека

var inputs = document.getElementsByClassName('isaimed');

for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('click', function() {   

    if (this.checked) {
      this.nextElementSibling.removeAttribute("disabled");
      // or this.nextElementSibling.disabled = false;
      return;
    }

    this.nextElementSibling.setAttribute("disabled", "disabled");
    // or this.nextElementSibling.disabled = true;

  })
}
<div>
  <input type="checkbox" class="isaimed" name="attr_targeted_checkbox1">
  <button type='roll' class="isroll" disabled="true">Button</button>
</div>
<div>
  <input type="checkbox" class="isaimed" name="attr_targeted_checkbox1">
  <button type='roll' class="isroll" disabled="true">Button</button>
</div>
<div>
  <input type="checkbox" class="isaimed" name="attr_targeted_checkbox1">
  <button type='roll' class="isroll" disabled="true">Button</button>
</div>

Обновлено после редактирования вопроса

В вашей скрипте input и button не являются братьями и сестрами, так что вот обновление, которое будет работать для вашей скриптовой версии

if (this.checked) {
  this.parentElement.nextElementSibling.children[0].disabled = false;
  return;
}
this.parentElement.nextElementSibling.children[0].disabled = true;
Dysadia ответил: 13 июня 2018 в 08:38
Спасибо за ваше быстрое решение. Он работает как прелесть в фрагменте. К сожалению, не в моем документе. Может ли возникнуть проблема с таблицей? Я добавлю скрипку, может быть, это проблема на моей стороне.
LGSon ответил: 13 июня 2018 в 08:41
@Dysadia Добавьте скрипку здесь, как комментарий, и я посмотрю
Dysadia ответил: 13 июня 2018 в 08:45
ссылка
LGSon ответил: 13 июня 2018 в 08:48
@Dysadia Ahh, input и button в вашем коде не являются братьями и сестрами, но их родители, так вот, это обновленная версия вашей скрипки: jsfiddle.net/huf0zt45/2
LGSon ответил: 13 июня 2018 в 08:53
@Dysadia Также добавил, что обновленный оператор if к моему ответу

Дополнительное видео по вопросу: Javascript: включить кнопки на флажке 'check (оба с ElementsByClass)

Создание интерактивной аудио-кнопки (JavaScript, HTML, CSS)

Javascript вывод на страницу. JS для начинающих

JavaScript Tutorial For Beginners #40 - The onClick Event