iCheck plugin is breaking my form

Question

I have a strange problem that I've been encountering with the jQuery iCheck plugin.

For some reason, it seems to be removing some of the elements on my form. I've created two jsfiddles to demonstrate what's happening.

Here is an example of my form without the iCheck script included: http://jsfiddle.net/k77Dn/1/ As you can see, the "book your training" button is showing up at the bottom of the form.

Now here's an example of the form with the iCheck script included: http://jsfiddle.net/yU7TS/2/ As you can see, the "book your training" submit button is hidden for some reason.

This is the script in question:

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

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

My only conclusion is that the iCheck script/plugin is hiding the form submit element, but I can't for the life of me figure out why that's happening.

Answer 1

The reason the button is being removed is because the current selector runs that each for the hidden inputs right before the button as well as the radio buttons. I assume you only want to be executing this for the radio buttons. The label.remove(); line removes the input button when it runs on the hidden input right before it.

The $('input').each(function(){ is running for every input, not only the radio buttons. If you want to restrict it to those, change your selector to $('input[type="radio"]').each(function(){