在特定条件下取消选中引导表中的表行

我之前的问题是这个 ，如果用户选择“Stock Available = null或0”的行，我想取消选中选中的行。 现在我的jquery代码是：

$(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事件但是无法理解它。

Answer 1

看一下jQuery on event如何附加事件

 $(SELECTOR).on(EVENT,CALLBACK) 

每当使用SELECTOR的元素上发生EVENT时，都会调用CALLBACK函数。 $(document).ready(function(){})是$(document).on('ready',function(){});简写$(document).on('ready',function(){}); 。 因此，当ready事件发生时，将调用callback。 请注意，’ready’事件仅在页面首次加载时触发一次，因此回调只会被调用一次。 现在你在准备好的回调中有你的购物车hiddin按钮逻辑，所以它只被调用一次。

  $(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和check.bs.table ，它会在检查/取消选中时触发。 请注意，这些事件仅在用户交互后发生，因此在首次加载页面时不会调用这两个回调。

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

所以你的算法将是这样的：

 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 

Answer 2

即将取消选中Row，如果它有’Stock Available = null或0，我假设您正在使用wenzhixin的bootstrap-table，并且您的数据有一个唯一的ID，就像您在问题中提到的row.id一样

我的方法如下：1。在加载数据时定义表的唯一ID 2. oncheck：使用行检查Stock_Available是否为空或0 3.如果是，则使用方法

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

这是解决方案http://jsfiddle.net/pacitwizere/xjvp8xq0/5/