How to switch editing on/off for rows programattically

zehh_junior

I have a datatable on a page and, after I switch a checkbox on/off, I would like to make all rows not editable EXCEPT for the first row. I will then replicate the values on the first row to all the others (this part works).

What I've been attempting to do is switching the class responsible for making the columns editable on some of the rows, but it doesn't work for some reason.

On my fields declaration I have:

{ data: 'id' },
{ data: 'blocked' },
{ data: 'store' },
{ data: 'quantity',
    className: 'edit' },
{ data: 'price' ,
    className: 'edit'},
{ data: 'description' ,
    className: 'edit'},
{ data: 'reference' }

I am using KeyTable, therefore, I have the following declaration also:

keys: {
    columns: '.edit',
    editor: editor
}

This makes only the cells with the class .edit as editable. This works fine. This is what I'm attempting to do to make some cells uneditable:

 $("#changeAll").on("click", function(e) {
    // This bit does its work correctly. It assigns the class to the correct elements.
    if($("#changeAll").is(":checked")) {
        $('#theTable tbody tr:not(:first-child) td.edit').addClass('notEdit').removeClass('edit');
    } else {
        $('#theTable tbody tr:not(:first-child) td.notEdit').addClass('edit').removeClass('notEdit');
    }
});

So the classes switch correctly, but the datatable seems to break. When trying to alter any given cell, it is no longer editable (even the ones that SHOULD be and do have the correct class assigned to them). Also, keys navivigation seems unaltered. The following exception is thrown to the browser following any edit attempt:

Uncaught TypeError: Cannot read property 'index' of undefined
    at l._editor (dataTables.keyTable.min.js:9)
    at HTMLTableElement.<anonymous> (dataTables.keyTable.min.js:8)
    at HTMLTableElement.dispatch (jquery-1.11.3.js:4670)
    at HTMLTableElement.elemData.handle (jquery-1.11.3.js:4338)
    at Object.trigger (jquery-1.11.3.js:4579)
    at jQuery.fn.init.triggerHandler (jquery-1.11.3.js:5295)
    at _Api.<anonymous> (dataTables.keyTable.min.js:10)
    at _Api.iterator (jquery.dataTables.js:6926)
    at l._emitEvent (dataTables.keyTable.min.js:10)
    at l._key (dataTables.keyTable.min.js:13)

I am at my wit's end. Any help would be appreciated, even if it means rewriting the whole thing.

allan

Are you able to link to the page please? Dynamically changing the classes is not something I've actually tried before, and I suspect what might be happening is that KeyTable has cached a cell which was previously navigable, but no longer is (but I might be wrong, which is why it would be great ot be able to see the page).

Thanks,
Allan