mercredi 18 mai 2022

iCheck - Checkboxes not reseting after form reset

After wasting like 2 days with this problem i finally decided to post this here and hope someone can help me. I work with "iCheck" (http://icheck.fronteed.com/) but also tried similar libraries that work roughly the same way. I try to achieve fancy checkboxes in form of a button - a pretty common thing i guess.

Now with iCheck and the other libraries i tested i always have one problem: I build my code to send an AjaxRequest to work with the data provided in a form and then reset the form. That works pretty neat, except for these chechboxes. If i change them to the other state they are not initialized with (like from FALSE to TRUE) and reset the form the button visually stays on that state until you click it once again. I works like it should with "normal" checkboxes.

I rebuild a small testpage and put it into jsfiddle. Is this a bug or am i totally overseeing something there? Can someone explain to me why that happens and how to engage with this?

HTML:

<form id="form">
  <input type="checkbox" class="check_test" name="test" value="1"><label>Checkbox 1</label>
  <input type="checkbox"  name="test2" value="1"><label>Checkbox 1</label>
  <br/>
  <button type="reset" onClick="this.form.reset"> Reset </button>
</form>

Javascript:

$(document).ready(function(){
  $('.check_test').each(function(){
    var self = $(this),
        label = self.next(),
        label_text = label.text();

    label.remove();
    self.iCheck({
      checkboxClass: 'icheckbox_line-blue',
      radioClass: 'iradio_line-blue',
      insert: '<div class="icheck_line-icon"></div>' + label_text
    });
  });
});

https://jsfiddle.net/p80dctkv/#&togetherjs=w6keeRvH3J

Thank you in advance.




Aucun commentaire:

Enregistrer un commentaire