icheck checkbox not getting unchecked

user_3479420 0
Viewed 3493

I have following interface for the form enter image description here

Here,I have used icheck checkbox.When I check and uncheck the checkbox manually, it works fine as I have written following code

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

On click of cancel button,I reset my form elements and hide it and display the list of stores div. On cancel button, I also have tried to uncheck the checkbox using following options, but none of them is working.

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

When I again open my form to enter the values, checkbox is not getting unchecked.Can someone tell me how to resolve this?

Screenshot of inspect element enter image description here

icheck checkbox jquery
3 Answers

Instead of this

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

Try this 

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

I think you may mix the use of form and 'iCheck checkbox', my example is OK:

$('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>

user_66655340

There's another corner case where attempting to change the value of the same checkbox in the iCheck's own ifChecked / ifUnchecked handlers, that even the 

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

approach doesn't seem to work. In this case, seemingly a timer hack is needed, as per here:

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