2017-02-09 64 views
0

可選複選框的限制僅適用於表的第一頁,第一頁上,當我到達限制在可選擇的複選框中,當我點擊分頁中的下一頁或其他頁碼並點擊另一個複選框時,它不會限制我,我應該怎麼做,它也會應用在其他頁面上?複選框(Icheck)限制不適用於數據表中的其他頁面,僅適用於第一頁

這裏是我的代碼:

$(document).ready(function() { 
    var $datatable = $('#datatable-checkbox'); 

    $datatable.dataTable({ 
     'order': [[1, 'asc']] 
    }); 

    var limit = 2; 

    $datatable.on('draw.dt', function() { 
     $('input').iCheck({ 
      checkboxClass: 'icheckbox_flat-green' 
     }); 
    }); 

    $(".flat").on("ifChecked",function(e) { 
     var checkboxes = $("input:checkbox"); 
     var $this = $(this); 

     if (checkboxes.filter(":checked").length > limit) { 
      swal({ 
       title: "Book Limit Reached", 
       text: "", 
       type: "warning", 
      }); 

      setTimeout(function() { 
       $this.iCheck('uncheck'); 
      }, 1); 
     } 
    }); 
}); 

回答

0

您需要通過在on()呼叫的第二個參數提供選擇使用事件委託,見下面的例子:

$datatable.on('ifChecked', '.flat', function() { 
    // your code here 
}); 

從jQuery的on()方法文檔:

委託事件的優點是可以處理ev從 後代添加到文檔中的元素。

請參閱jQuery的「直接和委託事件」on()方法文檔和jQuery DataTables – Why click event handler does not work以獲取更多信息。

此外,您還需要使用​​jQuery DataTable API方法來獲取所有複選框的列表,因爲除DOM以外的其他頁面複選框不會存在。

var checkboxes = $datatable.DataTable().$("input:checkbox"); 
+0

感謝您的快速響應,但我認爲我不知道根據您的建議構建我的代碼。我一直在嘗試它,但我認爲我沒有這樣做:(.. ..對不起,但你可以詳細說明更多?或者如果它確定,你可以基於我的代碼上面構造正確的代碼?..這將幫助我很大。 。謝謝 – Neil0412

+0

我現在明白了,如果終於做到了..非常感謝你!!挫折首先進入了我,而不是完全理解它:)希望別人能夠從這篇文章中得到幫助。 – Neil0412

+0

當我通過從不同的不同頁面選定的複選框值,並非所有的複選框在表單提交過程中發送?應該怎樣解決這個問題? – Neil0412

0

爲他人蔘考,這是我怎麼它的基礎上@ Gyrocode.com的建議..

順便說一句,我用I檢查的複選框和sweetalert的彈出窗口/警報

$(document).ready(function() { 
var $datatable = $('#datatable-checkbox'); 

$datatable.dataTable({ 
    'order': [[1, 'asc']] 
}); 

var limit = 2; 

$datatable.on('draw.dt', function() { 
    $('input').iCheck({ 
     checkboxClass: 'icheckbox_flat-green' 
    }); 
}); 

$datatable.on('ifChecked', '.flat', function() { 
    var checkboxes = $datatable.DataTable().$("input:checkbox"); 
    var $this = $(this); 

    if (checkboxes.filter(":checked").length > limit) { 
     swal({ 
      title: "", 
      text: "", 
      type: "warning", 
     }); 

     setTimeout(function() { 
      $this.iCheck('uncheck'); 
     }, 1); 
    } 
});}); 
相關問題