How to disable a checkbox depending on cell value ?

Morrocs_Thief

Hello, I have dinamic tables and its rows always have in the first column a checkbox to select the entire row and its info.
My problem is that in a specific cell of every row, the data may be different, and depending on that, I have to " disable / prevent / forbid " the user to select that row.

I implemented the buttons: "Excel", "selectAll" and "selectNone"
Also implemented: "select-checkbox"

I use this: table.on('user-select', function (e, dt, type, cell, originalEvent)
and: e.preventDefault(); as a result when the value of cell is 'B'
also try: return false;
but is not working. The result is that as soon as the first 'B' option appears, the entire table disables clicking the checkbox of every row, no matter if it is 'A' or 'B', and clicking the 'Select All' button still works and checks everything, even the 'B' row, when it shouldn't.

So:
- if the cell data in a row is 'A', the user can use the checkbox by clicking the checkbox or click the 'Select All' button
- if it is 'B', the user can't use the checkbox, neither clicking on checkbox nor click on 'Select All' button

Hope you can help me, thanks in advance!!!

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Morrocs_Thief

Thanks for the advice Colin, I'm very new to programming and of course to this forum.
Here is a test case: http://live.datatables.net/sezevoma/1/edit?js,console,output
I really hope it works.

colin

Thanks for that - that helped understand the issue. You can do something like this - very similar to your first idea.

Colin

Morrocs_Thief

Wow, that worked perfectly in the test case Colin, thank you very much.
2 more questions my friend:

• How can I detect the selectable data with this :
  dataDatatables[i]["Load State"] === "Rejected"
  instead of this? :
  table.row(cell.node()).data()[4] === 'B'
  I tried to change 'B' with my real info ('Rejected') but doesn't work.
  I got this error: VM879:219 Uncaught ReferenceError: cell is not defined

• What about the 'Select All' button? Is there a way to to click it and that
  it does not select the 'A' option rows ?

Once again, thanks a lot in advance for the help!

colin

Here's the second part - it need a function for the row-selector. I'm not sure about the first - cell is passed into the event callback, so it should be visible. Could you post more of the code here or link to your page?

Colin

Morrocs_Thief

Thank you very much for the help Colin, I finally made the code work.
This is the final result :

var table = $('#example').DataTable( {

columnDefs: [
            {
                "targets": 0,
        "orderable": false,
        "createdCell": function(td, cellData, rowData, row, col) {
                if (rowData["Load State"] === "Rejected") {
                    $(td).removeClass('select-checkbox');
                    }else {
                        $(td).addClass('select-checkbox');
                    }
                }
            }
            ],

select: {
            style:    'multi',
            selector: 'td:first-child'
            },
        order: [[ 1, 'asc' ]
        ],

dom: 'Bfrtip',
      buttons: [ {
               extend: 'selectAll', 
               action: function() {
                      table.rows(function ( idx, data, node ) {
                            return data['Load State'] === 'Rejected'? false: true;
                       }).select();
               }
      },
               'selectNone',
        {
                extend: 'excelHtml5',
                exportOptions: {
                     columns: [ 1, 2, 3, 5, 6 ]
                }
            }
        ]
    } );

table.on('user-select', function ( e, dt, type, cell, originalEvent ) {
        if (table.row(originalEvent.target._DT_CellIndex.row).data()["Load State"] === 
        'Rejected') {
            e.preventDefault();
        }
    });

////////// The first change //////////

I remove the classname here :
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ]

And applied here :
"createdCell": function(td, cellData, rowData, row, col) {
if (rowData["Load State"] === "Rejected") {
$(td).removeClass('select-checkbox');
}else {
$(td).addClass('select-checkbox');
}
}

////////// And the second change //////////

I change this :
table.on('user-select', function (e, dt, type, cell, originalEvent) {
if (table.row(cell.node()).data()[4] === 'B') {
e.preventDefault();
}
}

For this :
table.on('user-select', function ( e, dt, type, cell, originalEvent ) {
if (table.row(originalEvent.target._DT_CellIndex.row).data()["Load State"]
=== 'Rejected') {
e.preventDefault();
}
});