Javascript to Disable checkboxes in a table with variable rows

Question

I have a table which can have variable # of rows. how can I disable all checkboxes at once?

   <table border="1"  class="myTable grid">
    <tr align="center">
    <td>&nbsp;</td>
    <td>A</td>
    </tr>
    <tr align="center">
    <td>1</td>
    <td><input type="checkbox" name="cb1;1" value="1"></td>
    </tr>
    <td>2</td>
    <td><input type="checkbox" name="cb2;1" value="1" checked></td>
    </tr>
    <tr align="center">
     </table>

If you could use jQuery, $('.myTable input[type=checkbox]').attr('disabled', 'disabled') would do the trick. — John Bupit
– John Bupit, Commented Aug 20, 2015 at 23:53
@Kaur there should be a button or tick on the left of each answer. You can only pick one. — pyb
– pyb, Commented Aug 21, 2015 at 0:39

asdf · Accepted Answer · 2015-08-20 23:57:50Z

1

Here is a javascript only solution that disables all checkboxes in myTable.

document.getElementByClassName("myTable").querySelectorAll("input[type='checkbox']").disabled = true;

answered Aug 20, 2015 at 23:57

asdf

3,0872 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Bupit Over a year ago

It's document.getElementsByClassName()

John Bupit · Accepted Answer · 2015-08-21 00:01:46Z

1

A jQuery solution would be:

$('.myTable input[type=checkbox]').attr('disabled', 'disabled');

Alternatively:

document.querySelectorAll('.myTable input[type=checkbox]').disabled = true;

answered Aug 21, 2015 at 0:01

John Bupit

10.7k10 gold badges45 silver badges79 bronze badges

Comments

guest271314 · Accepted Answer · 2015-08-21 00:19:41Z

1

Try utilizing a for loop to iterate NodeList returned by document.querySelectorAll(selectors) , set each [type=checkbox] element to disabled within for statement

var inputs = document.querySelectorAll("[type=checkbox]");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].disabled = true;
}

<table border="1" class="myTable grid">
  <tbody>
    <tr align="center">
      <td>&nbsp;</td>
      <td>A</td>
    </tr>
    <tr align="center">
      <td>1</td>
      <td>
        <input type="checkbox" name="cb1;1" value="1">
      </td>
    </tr>
    <td>2</td>
    <td>
      <input type="checkbox" name="cb2;1" value="1" checked>
    </td>
    </tr>
    <tr align="center">
  </tbody>
</table>

answered Aug 21, 2015 at 0:19

guest271314

1

1 Comment

Kaur Over a year ago

I have more checkboxes on the form with type checkbox; hence I am targeting these only with table. Thanks for your input.@guest271314

Collectives™ on Stack Overflow

Javascript to Disable checkboxes in a table with variable rows

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related