BootstrapToggle switch conditionally switch state

Question

I'm trying to use bootstraptoggle in one of my pages. The initial state is off / disabled.

The page loads several boolean values and stores them as hidden text. Then I have a script which looks them up via their IDs. Upon that hidden text it should toggle the slider.

I was able to get the hidden text and make the conditional check but I'm not able to toggle the slider for some reason.

Here is my code:

$(document).ready(function () {
  var flags = [];
  var userID = '',
      toggleSlider = '';

  flags = document.querySelectorAll('*[id^="activeFlag_"]');

  flags.forEach(function (flag) {
    userID = flag.id.split('_')[1];

    // This is where i search for the hidden text
    if (flag.firstChild.data == 'True') {
      // Nothing works here.
      $('#activeToggle_' + userID).bootstrapToggle('toggle');
    }
  });
});

And this is the html code that I need to work with:

    <p id="activeFlag_@user1">@item.activeFlag</p>
    <div class="checkbox">
        <label>
            <input id="activeToggle_user1" type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
        </label>
    </div>

Answer 1

Your code is too opaque without any data example. However one thing could be a cause of its problem:

if (flag.firstChild.data == 'True') {

Try to replace it with:

if (flag.firstElementChild.data == 'True') {

Here you could find explanation:

The firstChild property returns the first child node of the specified node, as a Node object.

The difference between this property and firstElementChild, is that firstChild returns the first child node as an element node, a text node or a comment node (depending on which one's first), while firstElementChild returns the first child node as an element node (ignores text and comment nodes).

Note: Whitespace inside elements is considered as text, and text is considered as nodes (See "More Examples").

Update after example code was added

For the example code you provided, you should change the split argument:

userID = flag.id.split('_')[1];

to:

userID = flag.id.split('_@')[1];

Thanks to twain for initial jsfiddle. I have updated it accordingly: jsfiddle