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

Question

I actually have a pretty simple question, but I've been trying for two days now and I just don't find an answer I need, or maybe I just don't understand it.

That is my problem: I have two rows in a table:

row checkbox
row button

I want the button only be enabled, if the checkbox in the same row is enabled. Picture for better understanding

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

I use classes and stumbled across getElementsByClassName and the fact, that you get an array/node of objects. I tried something like this:

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;
    }
}

and like 20 other codeparts and functions I found on the web, but it's not working. Maybe I have to assign the rows or something like that? Really, I am just utterly desperate and my mind is full of chunk right now.

Thank you very much for your help!

fiddle

You misspelled `'isaimed'` in the script. It is `'isamed'` in the markup. Does that help? — Asons, Jul 07 '18 at 21:34
Unfortunately no, it was just a typo in fiddle I made. Thanks anyways! Fixed it :) — Dysadia, Jul 07 '18 at 21:40
Possible duplicate of [Enable/Disable submit button if checkbox is checked/unchecked?](https://stackoverflow.com/questions/10021848/enable-disable-submit-button-if-checkbox-is-checked-unchecked) — Heretic Monkey, Jul 07 '18 at 21:55
That links answers use inline script and is not a good dupe. — Asons, Jul 07 '18 at 21:57

Asons · Accepted Answer · 2018-07-07T22:33:06.553

You need to add an addEventListener to your input's to detect when they are clicked on.

Then, with nextElementSibling, you get the button and can toggle its state.

Stack snippet

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>

Updated after question edit

In your fiddle the input and button aren't siblings, so here is an update that will work for the fiddle version of yours

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

Thank you for your super fast solution. It works like a charm in the snippet. Unfortunately not on my document. Could the table be an issue? I will add a fiddle, maybe its an issue on my side. — Dysadia, Jul 07 '18 at 22:18
@Dysadia Add the fiddle here as a comment and I'll have a look — Asons, Jul 07 '18 at 22:21
@Dysadia Ahh, the `input` and `button` in your code are not siblings, their parents are though, so here is an updated version of your fiddle: https://jsfiddle.net/huf0zt45/2/ — Asons, Jul 07 '18 at 22:28
@Dysadia Also added that updated `if` statement to my answer — Asons, Jul 07 '18 at 22:33

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

1 Answers1