Bootstrap Data Table checkbox change class

Question

I am using Bootstrap Data Table and want to remove a class to a button when a checkbox is checked and add a class if all checkboxes are unchecked.

What I am currently doing for checked:

.on('check.bs.table', function (e, row) {
    $('#remove-user').removeClass('disabled');
})

This works good.

What I am doing for unchecked:

.on('uncheck.bs.table', function (e, row) {
    $('#remove-user').addClass('disabled');
})

This also works but the problem that I am running into is when I have more than one checkbox checked as soon as I uncheck one of those boxes it adds the class disabled. I do not want to add the class disabled until all checkboxes have been unchecked. Does anyone have any suggestions on how to do this?

`if ( $('input[type="checkbox"]:checked').length == 0 ) { /* disable */ }` — Wild Beard, Jan 09 '15 at 22:39
@Press Where should this go? Also why s the disable commented out? — iamthestreets, Jan 12 '15 at 19:28
The commented section is your disable code, I just didn't want to rewrite your code, from your example, in a comment. I can write a jsfiddle as an example. — Wild Beard, Jan 12 '15 at 19:29

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Fiddle

Above is a link to a demo of disabling another element IF all checkboxes are unchecked.

Below is the simple .click(function() { .. } bound to type="checkbox" inputs.

// Each time a checkbox is clicked it'll run this check
$('input[type="checkbox"]').click(function() {
    var length;
    length = $('input[type="checkbox"]:checked').length;
    $('.amount').text(length);
    if ( length === 0 ) {
        $('#remove-user').addClass('disabled');   
    } else {
        $('#remove-user').removeClass('disabled');
    }
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 12 '15 at 19:41

Wild Beard

2,919
1
12
24

Thanks! When I check the box it says the length is 7 and will increment by one each time a check a new box so if I change it to be `> 7` it works. Any idea why? – iamthestreets Jan 12 '15 at 21:29
You're welcome. However I don't quite understand your question now, sorry. – Wild Beard Jan 12 '15 at 21:30
Sorry for the lack of detail. In your JSFiddle example when I check a box it shows the selected amount as 1 when I check it again it shows it as 2, etc. When I uncheck it goes back to zero. But when I add your code to mine and I check a box it starts with the number 7, 8, etc. When I uncheck it sets the number to 6. That's why `length === 0` was not working for me Here is how I display the number: `var $result = $('#user-data'); var length; length = $('input[type="checkbox"]:checked').length; $result.text(length);` When I get home I will try to create a JSFiddle. – iamthestreets Jan 12 '15 at 22:15
Here is the [JSFiddle](http://jsfiddle.net/mikev10/e3nk137y/282/). When you check a box you will notice the number 5 appears at the top and if you check another one it will show 6 if you uncheck all boxes it will go to 4. Please let me know if you need more info. – iamthestreets Jan 13 '15 at 00:46
1

Change `'input[type="checkbox"]'` to `'.bs-checkbox input[type="checkbox"]'`. The dropdown that contained "name, stars, forks, desc" was counting towards the `checkbox:checked` length. Sorry for the late reply – Wild Beard Jan 13 '15 at 14:20
please see http://stackoverflow.com/questions/32266101/uncheck-table-row-in-bootstrap-table-on-specific-condition also – Vilas Aug 31 '15 at 10:51

Bootstrap Data Table checkbox change class

1 Answers1

Fiddle