Javascript：启用复选框检查按钮（均使用 ElementsByClass）

Question

我其实有一个很简单的问题，但是我已经尝试了两天了，我只是没有找到我需要的答案，或者我只是不明白。

这是我的问题： 我在一个表中有两行：

1. 行复选框

2. 行按钮

如果启用了同一行中的复选框，我希望仅启用该按钮。 Picture for better understanding

<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

Answer 1

您需要将addEventListener 添加到您的input 以检测它们何时被点击。

然后，使用nextElementSibling，您将获得button 并可以切换其状态。

堆栈sn-p

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;