CODEWITHSUNDEEP
jquerycheckboxicheck
Gunjan Aswani
Gunjan Aswani

Reputation: 118

icheck checkbox not getting unchecked

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

Upvotes: 5

Views: 5424

Answers (3)

StuartLC
StuartLC

Reputation: 107267

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);

Upvotes: 1

davykiash
davykiash

Reputation: 1804

Instead of this

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

Try this 

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

Upvotes: 4

JiangangXiong
JiangangXiong

Reputation: 2426

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>

Upvotes: 1

Related Questions