Question

我实际上有一个非常简单的问题，但是我已经尝试了两天了，但是我找不到所需的答案，或者也许我只是不明白。

那是我的问题：我在表中有两行：

行复选框
行按钮

如果要启用同一行中的复选框，则只希望启用按钮。 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并可以切换其状态。

堆栈片段

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;

Javascript：启用复选框的复选框上的按钮（均与ElementsByClass一起使用）

1 个答案: