CODEWITHSUNDEEP
javascripthtml-table
user1730941
user1730941

Reputation:

Disable table using checkbox

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

Upvotes: 0

Views: 377

Answers (2)

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7522

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.

Upvotes: 2

Abhitalks
Abhitalks

Reputation: 28387

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 () {...

Upvotes: 5

Related Questions