【iCheck基本用法的使用】

iCheck基本用法的使用

一. 常用方法改變iCheck的狀态
1. 使拿到的iCheck标簽選中
$('#input-1, #input-3').iCheck('check');
2. 使拿到的iCheck标簽非選中
$('#input-1, #input-3').iCheck('uncheck');
3. 使拿到ICheck标簽不可點選
$('#input-2, #input-4').iCheck('disable');
4. 使拿到ICheck标簽可點選
$('#input-2, #input-4').iCheck('enable');
5. 移除iCheck樣式
$('input').iCheck('destroy');

           

二. 常用回調事件,監聽iCheck的change事件.
事件名稱 使用時機
ifClicked  使用者點選了自定義的輸入框或與其相關聯的label
ifChanged  輸入框的 checked 或 disabled 狀态改變了
ifChecked  輸入框的狀态變為 checked
ifUnchecked  checked 狀态被移除
ifDisabled  輸入框狀态變為 disabled
ifEnabled  disabled 狀态被移除
ifCreated  輸入框被應用了iCheck樣式
ifDestroyed  iCheck樣式被移除
例. iCheck 的選中事件
$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});
例. iCheck 的取消選中事件 
$(document).on("ifUnchecked", "input", function(event){
  alert(event.type + ' callback');
}

var checkAll = $('input.all');
var checkboxes = $('input.check');

checkAll.on('ifChecked ifUnchecked', function(event) {
  if (event.type == 'ifChecked') {
     checkboxes.iCheck('check');
  } else {
     checkboxes.iCheck('uncheck');
  }
});

checkboxes.on('ifChanged', function(event){
  if(checkboxes.filter(':checked').length == checkboxes.length) {
      checkAll.prop('checked', 'checked');
  } else {
      checkAll.prop('checked',false);
  }
  checkAll.iCheck('update');
});

           

表單頁可以選擇，改為無法選擇

class="i-checks "

$(".i-checks").remove();
$(".i-checks").iCheck('uncheck');