Mdb-ui-kit: Checkbox & Toggle button duplicating

Created on 30 Jan 2015 · 7Comments · Source: mdbootstrap/mdb-ui-kit

Good afternoon,

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

My checkboxes and toggle buttons are appearing duplicated like here:

checkbox toggle-duplicated

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

Source

versedi

Most helpful comment

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>

sthum on 20 Sep 2016

👍2

All 7 comments

May I see the html code before javascript edits it?

FezVrasta on 30 Jan 2015

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

versedi on 31 Jan 2015

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.

danbars on 25 May 2015

❤1 👍1

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>

sthum on 20 Sep 2016

👍2

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. :)

compgumby on 27 Sep 2016

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.

miyurusagarage on 8 Sep 2017

@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