iCheck和jQuery序列化

Question

我使用iCheck插件来美化我的复选框。但是，当我使用jQuery serialize从表单中收集所有已填写的数据时，选中的复选框是看不到的，也不会通过post提交。

我猜想当用户单击要选中的iCheck框时，输入类型复选框的状态实际上并没有设置为选中状态。

该怎么做呢？使用普通的HTML复选框可以被serialize很好地拾取。

表格的相关部分：

<div class="form-group">
<label class="">
<input type="checkbox" class="minimal" id="remote" name="remote" value="1">
</label>                        
</div>

脚本：

//iCheck for checkbox and radio inputs
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue',
checkedClass: 'checked',
});

提交函数：

$.ajax({
  type: "POST",
  url: '/taken/action.php',
  data: $form.serialize(),
  dataType: "json",
  ............

Answer 1

在我看来，iCheck将复选框包装在一个div中，如下所示：

<div class="icheckbox_minimal" aria-checked="true" aria-disabled="false">
    <input tabindex="5" type="checkbox" id="minimal-checkbox-1" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);">
    <ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
</div>

当您选中它时，它会将您指定的选中类添加到div中，本例中为' checked‘。

我要做的只是让隐藏输入，当您单击div时更改值：

$(".icheckbox_minimal").click(function(){
    // You might want more logic in here since You probably have more then
    // One check box to toggle.
    var val = $("#myHiddenIpnut").val();
    $("#myHiddenIpnut").val(val === "true" ? "false" : "true");
});

现在jQuery将获取这些输入:)