Disable table using checkbox

Question

I have this checkbox, how to disable a table (disable all the input fields in the table) whenever I check the checkbox?

<label><input type="checkbox" name="view" value="d">N/A</label>

Is it possible using purely JavaScript and not jQuery.

This is the code now

var elems = document.getElementById('table-id').querySelectorAll('input,select,textarea');
document.getElementById('check').onchange = function () {
    if (document.getElementById('check').checked) {
        for (var i = 0; i < elems.length; i++) {
            elems[i].disabled = true;
        }
    } else {
        for (var i = 0; i < elems.length; i++) {
            elems[i].disabled = false;
        }    
        }
    }

and the table

<table id='table-id' border="1">

but it shows error like this:

Uncaught TypeError: Cannot read property 'querySelectorAll' of null

It is a table that has fields in it. text field, time, number, drop down and check boxes — user1730941
– user1730941, Commented May 13, 2014 at 8:07
So, you have a table containing a number of input fields, and you want to disable the inputs?? — Matt
– Matt, Commented May 13, 2014 at 8:08

Abhitalks · Accepted Answer · 2014-05-13 08:31:46Z

5

Using jQuery, it is easy:

$("#tableId").find(":input").prop("disabled", true);

Using Javascript, it is a little longer:

var elems = document.getElementById('tableId').querySelectorAll('input,select,textarea');

for (var i = 0; i < elems.length; i++) {
    elems[i].disabled = true;
}

Fiddle: http://jsfiddle.net/abhitalks/6s7QL/2/

Update:

Added your checkbox code:

document.getElementById('checkboxId').onchange = function () {...

edited May 13, 2014 at 8:31

answered May 13, 2014 at 8:10

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

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

9 Comments

Abhitalks Over a year ago

@FrédéricHamidi: O yes, old habit of attr. Corrected.

brasofilo Over a year ago

And the OP want pure JS, not jQuery... (?)

brasofilo Over a year ago

Well, that's the problem of trying to be the Fastest Gun in the West ;) Retracted and reverted

Abhitalks Over a year ago

@vaizaren: you are getting that error in the fiddle?

Abhitalks Over a year ago

@vaizaren: please check the element id carefully.

|

Karlen Kishmiryan · Accepted Answer · 2014-05-13 10:20:23Z

2

Here is the pure JavaScript version to do the trick you want:

var table = document.getElementById('tableId'),
    inputs = table.getElementsByTagName('input'),
    checkbox = document.getElementById('checkboxId');

checkbox.onchange = function(e) {
    if(checkbox.checked) {
        disableTable(true);
    } else {
        disableTable(false);
    }
}

function disableTable(disableState) {
    for (var i = 0, l = inputs.length; i < l; i++) {
        inputs[i].disabled = disableState;
    }
}

And here is the working example in JSFiddle.

edited May 13, 2014 at 10:20

answered May 13, 2014 at 8:15

Karlen Kishmiryan

7,5726 gold badges38 silver badges46 bronze badges

2 Comments

user1730941 Over a year ago

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null js.html:43 (anonymous function)

Karlen Kishmiryan Over a year ago

The provided code in JSFiddle works fine. The error is specific to your customized code and the reason is that you don't have a table with tableId. Make sure to write the id of your table instead of tableId in the above code.

Collectives™ on Stack Overflow

Disable table using checkbox

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related