How to enable/disable a button when Datatables has checkbox selected row

Question

How can I enable/disable my button when there is a selected checkbox row in my datatable?

var pctoreceive = $('#pcToReceive').DataTable({
           'columnDefs': [{
                'targets': 0,
                'searchable': false,
                'orderable': false,
                'className': 'dt-body-center',
                'render': function (data, type, full, meta) {
                    return '<input type="checkbox" name="id[]" value="'
                       + $('<div/>').text(data).html() + '">';
                }
            }],

I've shorten my code. Above shows that I added a new column for checkbox select

Those two button must be disabled when there is no selected row. Otherwise enable

$('#rc-select-all').on('click', function() {
    // Check/uncheck all checkboxes in the table
    var rows = pctoreceive.rows({
        'search': 'applied'
    }).nodes();
    $('input[type="checkbox"]', rows).prop('checked', this.checked);
});

// Handle click on checkbox to set state of "Select all" control
$('#pcToReceive tbody').on('change', 'input[type="checkbox"]', function() {
    // If checkbox is not checked
    if (!this.checked) {
        var el = $('#rc-select-all').get(0);
        // If "Select all" control is checked and has 'indeterminate' property
        if (el && el.checked && ('indeterminate' in el)) {
            // Set visual state of "Select all" control 
            // as 'indeterminate'
            el.indeterminate = true;
        }
    }
});

pumpkinzzz · Accepted Answer · 2016-04-28 08:59:03Z

3

Your issue has nothing to do with datatable.

Just set a counter variable to store how much input check are checked, then if > 0 enable your button.

See this small example (and fiddle)

var counterChecked = 0;

$('body').on('change', 'input[type="checkbox"]', function() {

    this.checked ? counterChecked++ : counterChecked--;
    counterChecked > 0 ? $('#submitButton').prop("disabled", false): $('#submitButton').prop("disabled", true);

});

edited Apr 28, 2016 at 8:59

answered Apr 28, 2016 at 8:53

pumpkinzzz

2,9852 gold badges20 silver badges34 bronze badges

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

11 Comments

pumpkinzzz Over a year ago

just because i didn't put any table on my example, but in your code you should use the specific table selector ofc :)

pumpkinzzz Over a year ago

because you're catching events only in the tbody $('#pcToReceive tbody').. change it in $('#pcToReceive')

pumpkinzzz Over a year ago

if it's disabled by default add the property disabled in the HTML, so it will render already disabled. like in my above example: <input id="submitButton" type="submit" disabled value="Submit">

pumpkinzzz Over a year ago

so this code shuold be removed. Button's Enable/Disabled should be managed only by checked input, not by this condition if (!pctoreceive.data().count())

pumpkinzzz Over a year ago

it would be already disabled, by default, if you put attribute disabled in your HTML code

|

Collectives™ on Stack Overflow

How to enable/disable a button when Datatables has checkbox selected row

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related