Ability to modify a bootstrap5-toggle ID attribute?

[SoftCircuits]

How can I change the id attribute of a bootstrap5-toggle element?

Here's My Scenario

I have some markup that includes an instance of bootstrap5-toggle and it works fine.

But then I clone that markup, and alter the ID of the toggle checkbox in the cloned markup.

Now, when I click the cloned toggle, it toggles the original toggle.

Question

Does a bootstrap5-toggle cache the <input> ID somewhere? I've carefully examined the markup, and all the IDs and name attributes appear to have been set correctly.

[github-actions]

Hi! 👋
Thanks for your issue. You are helping to improve Bootstrap 5 toggle.

[palcarazm]

Hi @SoftCircuits

Bootstrap toggle keep a reference to the original checkbox element for sincronizing the checkbox box status and state with the toggle.

So the better way to clone the element is :

• Clone the checkbox.
• Change id and name attributes
• Set a bootstrap toggle instance in the cloned checkbox like $('#checkboxClone').bootstrapToggle();

[SoftCircuits]

@palcarazm Thanks for responding. Unfortunately, I am already doing this.

One thing I noticed is that I was using clone(true, true). If I change that to clone(), clicking the cloned toggle doesn't toggle the first one anymore, but it doesn't work right either. The second one has some drawing issues and the text is doubled when I toggle the second one.

I think I need to keep the events because the cloned markup already has some handlers installed.

Unfortunately, JavaScript is not my main language so I'm not sure I can solve this. I may be able to put together a working example but I have quite a bit of code so I'm not sure.

[palcarazm]

Okay, I try to reproduce the issue by my side.

I'll be back with updates as soon as possible.

[palcarazm]

Hi @SoftCircuits ,

I let you a minimal code to clone a bootstrap toggle element.

html

<main class="container bg-white px-3 py-3 rounded">
        <form>
            <fieldset id="original_container" class="mb-3">
                <legend>Original</legend>
                <input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" id="original" name="original">
            </fieldset>
            <fieldset id="clone_container" class="mb-3">
                <legend>Clone</legend>
            </fieldset>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </main>

javascript with jQuery

    $('#clone_container').append($('#original').clone())
    $('#clone_container').find('#original')
        .attr('id','clone')
        .attr('name', 'clone')
        .bootstrapToggle();

I leave you also a zip with a complete example: clone.jquery.zip

I expect this will resolve your issue 😄!

[SoftCircuits]

@palcarazm First off, I really appreciate you taking the time to look at this.

Your code works great. Mine doesn't. I've spent time this morning trying to find out the difference. Here they are:

1. I need to copy an entire row of markup. So I'm copying more than just the one checkbox.
2. I do this after the page has loaded.

So I finally figured out the problem is that, in my case, it also copies the markup generated by bootstrap5-toggle.

I created a demo of this in a CodePen.

Is there any way to reset the markup generated by bootstrap5-toggle for a particular checkbox.

Thanks!

[palcarazm]

There are two ways to solve this:

Copying the row before the toggle render:

• Just do not set the tag data-toggle="toggle"
• Clone the row and change id and name
• Initialize the two toggle vía JavaScript $('#toggle1').bootstrapToggle(); and $('#toggle2').bootstrapToggle();

Destroying the instance before copying (if the copy is not on load)

• Destroy the instance with $('#toggle1').bootstrapToggle('destroy');
• Clone the row and change id and name
• Initialize the two toggle vía JavaScript $('#toggle1').bootstrapToggle(); and $('#toggle2').bootstrapToggle();

If you need a full example I can do it tomorrow in the morning 😊

[SoftCircuits]

@palcarazm Many thanks! I was able to get it working using your second method. Cheers!

[palcarazm]

@SoftCircuits that's great👏!

I will close your issue.

If you like this bootstrap plug-in you can rate it in openbase

Thanks 😊