Javascript:在复选框上启用按钮(都使用ElementsByClass)
Javascript:在复选框上启用按钮(都使用ElementsByClass)
提问于 2018-07-08 05:30:39
实际上我有一个非常简单的问题，但我已经尝试了两天，但我就是找不到我需要的答案，或者我只是不理解它。
这就是我的问题:我在一个表中有两行：
- 行复选框
- 行按钮
如果启用了同一行中的复选框，我只希望启用该按钮。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个代码片段和函数一样，但它不起作用。也许我必须分配行或类似的东西？真的，我只是完全绝望了，我现在满脑子都是块头。
非常感谢您的帮助！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-08 05:48:41
你需要在你的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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51227083
复制相关文章
相似问题
腾讯云开发者
