Javascript：啟用復選框的復選框上的按鈕（均與ElementsByClass一起使用）

Question

我實際上有一個非常簡單的問題，但是我已經嘗試了兩天了，但是我找不到所需的答案，或者也許我只是不理解。

那就是我的問題：表中有兩行：

1. 行復選框

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個代碼部分和功能，但無法正常工作。 也許我必須分配行或類似的東西？ 真的，我簡直是絕望了，現在我的腦海里充斥着很多東西。

非常感謝您的幫助！

小提琴

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> 

---

在問題編輯后更新

在您的小提琴中， input和button不是兄弟姐妹，因此這是一個更新，適用於您的小提琴版本

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