Checkbox & Toggle button duplicating

[versedi]

Good afternoon,

I'm currently having a problem with freshly cloned bootstrap-material-design.

My checkboxes and toggle buttons are appearing duplicated like here:

It doesn't matter which box I check - both are checking.
At toggle button we always have both states - turned on and off.

Any ideas what could cause that? Every other element works without any problems...
Have a nice weekend,
versedi

P.S. Posibble duplication of issue, but I'm not using NET:
https://github.com/FezVrasta/bootstrap-material-design/issues/147

[FezVrasta]

May I see the html code before javascript edits it?

[versedi]

Good advice.
Closing issue with error of my own. Sorry for the trouble.

[danbars]

I've had the same issue with perfectly fine HTML. In my case it happened because init() (or checkbox() or togglebutton() ) was called multiple times. Each additional time resulted in another <span class="toggle"> added to the dom, thus the duplication.
I couldn't easily avoid multiple calls because it was controlled by angular.

To fix it, I had to override one of material internal functions as follows:

$.material.togglebutton = function(selector) {
  // Add fake-checkbox to material checkboxes
  $((selector) ? selector : this.options.togglebuttonElements)
    .filter(":notmdproc")
    .filter(function(){ //added this filter to skip checkboxes that were already initialized
      return $(this).parent().find(".toggle").length === 0;
    })
    .data("mdproc", true)
    .after("<span class=toggle></span>");
};

You might want to do the same for checkboxes.
Hopefully this will help someone.

[sthum]

This is actually an issue when using with AngularJS and ArriveJS.
I needed to include ArriveJS so that the click animation on the elements works. Unfortunately the inclusion of arrive.js lead to duplicated toggle buttons and check boxes.

Using @danbars snippet works for toggle buttons. Thanks !!
As @danbars said you can do the same for checkboxes, like so:

$.material.checkbox = function(selector) {
        // Add fake-checkbox to material checkboxes
        $((selector) ? selector : this.options.checkboxElements)
                .filter(":notmdproc")
                .filter(function(){ //added this filter to skip checkboxes that were already initialized
                    return $(this).parent().find(".check").length === 0;
                })
                .data("mdproc", true)
                .after("<span class=check></span>");
    };

No more duplicate toggle button or check boxes:

<script>
    $.material.togglebutton = function(selector) {...};
    $.material.checkbox = function(selector) {... };
    $.material.init();
</script>

[compgumby]

I ran into this same issue and applied @danbars edit to my local distro for radio buttons. My issue was using Knockout with a collection... Please merge this in and make it available for the next release. Very helpful. :)

[miyurusagarage]

I also encountered this with Knockout.js observable usage with the "if" binding. This caused it to fire the init method twice. (when loading the dom and on if condition becoming true in knockout).

I worked around it by using the "visible" binding instead of the "if" binding. However,merging the above would be useful.

[ayushishah-easternts]

@sthum : Can you please guide me the scenario in which checkbox are getting added dynamically? as the above code is overall avoiding the checkbox to initialise