icheck复选框未取消选中

Question

我有以下表格界面

在这里，我使用了icheck复选框。当我手动选中并取消选中该复选框时，它可以正常工作，因为我编写了以下代码

//if checkbox "Product Feed Url" is unchecked,show the feed textbox
$('#crawlingUrl').on('ifUnchecked', function(event){
    $("#feedUrl").show();
});

//if checkbox of "Product Feed Url" is checked,hide the feed textbox
$('#crawlingUrl').on('ifChecked', function(event){
    $("#feedUrl").hide();
    $("#feedUrl-error").hide();
});

点击取消按钮，我重置我的表单元素并隐藏它并显示商店div列表。在取消按钮上，我也尝试使用以下选项取消选中该复选框，但它们都不起作用。

//$("#crawlingUrl").iCheck('uncheck');
//$("#feedDiv").find('#crawlingUrl').iCheck('uncheck');
//$("#feedDiv .clsCheckBox").iCheck('uncheck');
$("input[name=crawlingUrl]").iCheck('uncheck');

当我再次打开表单输入值时，复选框未取消选中。有人可以告诉我如何解决此问题吗？

inspect元素的截图

Answer 1

代替这个

$("input[name=crawlingUrl]").iCheck('uncheck');

尝试

$("input[name=crawlingUrl]").removeAttr('checked').iCheck('update');

Answer 2

我认为你可以混合使用form和'iCheck复选框'，我的例子没问题：

$('input').iCheck({
  // base class added to customized checkboxes
  checkboxClass: 'custom-icheckbox'
});
//if checkbox "Product Feed Url" is unchecked,show the feed textbox
$('#crawlingUrl').on('ifUnchecked', function(event){
    $("#feedUrl").show();
});

//if checkbox of "Product Feed Url" is checked,hide the feed textbox
$('#crawlingUrl').on('ifChecked', function(event){
    $("#feedUrl").hide();
    $("#feedUrl-error").hide();
});
function resetForm(){
$('form')[0].reset();
//$("#crawlingUrl").iCheck('uncheck');
//$("#feedDiv").find('#crawlingUrl').iCheck('uncheck');
//$("#feedDiv .clsCheckBox").iCheck('uncheck');
$("input[name=crawlingUrl]").iCheck('uncheck');
}

.custom-icheckbox {
  height: 20px;
  width: 20px;
  border: 1px solid red;
}
.resetBtn {
border:1px solid gray;
width: 50px;
height: 30px;
}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
  <input type="checkbox" id="crawlingUrl" name="crawlingUrl" value="enable" />
  <form action="/">
<label for="feedUrl">hint: </label>
<input type="text" id="feedUrl" name="feedUrl"/>
<label id="feedUrl-error" for="feedUrl">Error</label>
<div class="resetBtn" onClick="resetForm()">reset</div>
</form>

Answer 3

还有另一种极端情况，即尝试在iCheck自己的ifChecked / ifUnchecked处理程序中更改同一复选框的值，即使是

.removeAttr('checked').iCheck('update')

方法似乎无效。在这种情况下，似乎需要定时破解，例如per here：

setTimeout(function() { $("#myCheckBox").iCheck('uncheck'); }, 1);