在特定条件下取消选中引导表中的表行 [英] Uncheck table row in bootstrap table on specific condition

问题描述

我上一个问题是这并且如果用户选择具有'Stock Available = null或0'的行，我想取消选中选中的行。现在我的jquery代码是：

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();
      }*/

});

这里我还试图显示$（＃add_cart_btn）按钮iff checkedRows []至少一个记录。我搜索了上面的bootstrap事件，但不能理解它。

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.

推荐答案

看看jQuery on 事件附加事件

Take a look at how jQuery on event attaches events

$(SELECTOR).on(EVENT,CALLBACK)

每当 EVENT 在您使用 SELECTOR 选择的元素上发生code>，则会调用 CALLBACK 函数。 $（document）.ready（function（）{}） }）; 。因此，当 ready 事件发生时，回调get被调用。请注意，ready事件只在页面首次加载时触发一次，因此回调将只被调用一次。现在你有你的购物车hiddin按钮逻辑在ready回调，所以它只有一次调用。

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();
  }
  });

它会评估 checkedRows 是否为空并隐藏购物车按钮。此代码不会再次调用，因此，购物车按钮将永远不会显示。您正在侦听的两个引导事件是 check.bs.table 和 uncheck.bs.table 检查/取消选中。请注意，这些事件只发生在用户互动之后，因此当页面首次加载时，不会调用这两个回调。

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

这篇关于在特定条件下取消选中引导表中的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！