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

Question

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

这是我的问题：我在 table 中有两行：

行复选框
行按钮

我只想启用按钮，前提是启用了同一行中的复选框。 Picture for better understanding

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

我使用类并偶然发现了 getElementsByClassName 和事实，您得到了 array/node 个对象。我试过这样的事情：

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

您需要向 input 添加一个 addEventListener 以检测它们何时被点击。

然后，使用 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>

问题编辑后更新

在你的 fiddle 中，input 和 button 不是兄弟姐妹，所以这里有一个适用于你的 fiddle 版本的更新

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

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

Javascript: enable buttons on checkbox' check (both with ElementsByClass)

html

javascript

checkbox

button

getelementsbyclassname