Uncheck table row in bootstrap table on specific condition

Question

My previous question was this and I want to uncheck checked row if user selects a row that has 'Stock Available=null or 0'. Now my jquery code is:

$(document).ready(function()
{
    $("#add_cart_btn").hide();
    var json;
    var checkedRows = [];
    $('#table-style').on('check.bs.table', function (e, row) {
      checkedRows.push({id: row.id});
      $("#add_cart_btn").show();
    });

    $('#table-style').on('uncheck.bs.table', function (e, row) {
      $.each(checkedRows, function(index, value) {
        if (value.id === row.id) {
          checkedRows.splice(index,1);
        }
      });
    });
     /*if(checkedRows.length < 0) {
        // does not exist
        $("#add_cart_btn").hide();
      }
      else {
        // does exist
        $("#add_cart_btn").show();
      }*/

});

Here I'm also trying to show $("#add_cart_btn") button iff checkedRows[] contains at least one record. I searched bootstrap events for above but can not understood it.

Fitzpatrick

Answer 1

Take a look at how jQuery on event attaches events

$(SELECTOR).on(EVENT,CALLBACK)

Whenever the EVENT happens on the element you selected with the SELECTOR the CALLBACK function gets called. $(document).ready(function(){}) is shorthand for $(document).on('ready',function(){});. So when the ready event happens the callback get's called. Note that the 'ready' event is only triggered once when the page first loads, therefore the callback will only be called once. Right now you have your cart hiddin button logic in the ready callback so it only get's called once.

   $(document).('on',function(){
   var checkedRows = [];
   //[].length === 0
   if(checkedRows.length === 0) {
    // does not exist
    $("#add_cart_btn").hide();
  }
  else {
    // does exist
    $("#add_cart_btn").show();
  }
  });

It will evaluate that the checkedRows is empty and hide the cart button. This code is not called again so the cart button will never be shown. The two bootstrap events you are listening for are check.bs.table and uncheck.bs.table which fires when a check/uncheck occurs. Note that these events only occur after user interaction so the two callbacks are not called when the page is first loaded.

$(SELECTOR).on(EVENT,CALLBACK)
$('#table-style').on('check.bs.table', function (e, row) {
    //This event fires every time a checkbox is checked
});
$('#table-style').on('uncheck.bs.table', function (e, row) {
    //This event fires every time a checkbox is unchecked
});

So your algorithm will be something like this:

on page load:no checkboxes are checked so hide the cart button
on check: a checkbox is checked so show the cart button
on uncheck: if the checkedRows array is empty hide the cart button

Whiz

Ok, got it. but what about 'Stock Available=null or 0' in 1st line of question? – Fitzpatrick

Answer 2

About to uncheck the Row if is it has 'Stock Available=null or 0, I assume that you are using the bootstrap-table by wenzhixin and that your data has a unique id like you mentioned row.id in your question

My Approach goes like this: 1. Define a unique ID of your table when you are loading the Data 2. oncheck : use row to check if the Stock_Available is null or 0 3. if Yes use the method

$("#table").bootstrapTable("uncheckBy", { field: "Stock_Available", values: [row.id] })

Here is the solution http://jsfiddle.net/pacitwizere/xjvp8xq0/5/

Loyce