首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript:在复选框上启用按钮(都使用ElementsByClass)

Javascript:在复选框上启用按钮(都使用ElementsByClass)
EN

Stack Overflow用户
提问于 2018-07-08 05:30:39
回答 1查看 98关注 0票数 0

实际上我有一个非常简单的问题,但我已经尝试了两天,但我就是找不到我需要的答案,或者我只是不理解它。

这就是我的问题:我在一个表中有两行:

  1. 行复选框
  2. 行按钮

如果启用了同一行中的复选框,我只希望启用该按钮。Picture for better understanding

代码语言:javascript
复制
<input type="checkbox" class="isaimed" name="attr_targeted_checkbox1">
<button type='roll' class="isroll" disabled="true">

我使用类,偶然发现了getElementsByClassName,事实上,您得到了一个对象的数组/节点。我尝试了这样的东西:

代码语言:javascript
复制
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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-08 05:48:41

你需要在你的input中添加一个addEventListener来检测它们何时被点击。

然后,使用nextElementSibling,您可以获得button并可以切换其状态。

堆栈代码段

代码语言:javascript
复制
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;

  })
}
代码语言:javascript
复制
<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>

问题编辑后更新

在您的小提琴中,inputbutton不是兄弟,所以这里有一个更新,它将适用于您的小提琴版本

代码语言:javascript
复制
if (this.checked) {
  this.parentElement.nextElementSibling.children[0].disabled = false;
  return;
}
this.parentElement.nextElementSibling.children[0].disabled = true;
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51227083

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档