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，以检测它们何时被点击。

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

堆栈片段

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>

<小时/>

问题编辑后更新

在您的 fiddle 中，输入和按钮不是 sibling ，因此这里有一个适用于您的 fiddle 版本的更新

if (this.checked) {
  this.parentElement.nextElementSibling.children[0].disabled = false;
  return;
}
this.parentElement.nextElementSibling.children[0].disabled = true;