Toggle a Bootstrap Toggle element with JavaScript (and show animation)

Question

I have a Bootstrap Toggle element as follows:

 <input id="neutralInd" type="checkbox" name="neutralSite" onchange="setEventSite('neutral')" data-toggle="toggle" data-on="Yes" data-off="No"> 

Upon clicking it, it will toggle between Yes and No, and it successfully executes a JavaScript function that does other stuff (code below).

Here's what I want to do:

Upon selecting a Radio Button elsewhere on the page, it will execute JavaScript that toggles the Bootstrap Toggle to No. Here is the code I have so far:

Defining the radio buttons:

 <div class="radio"> <label><input type="radio" id="homeTeam<?php echo $row; ?>" name="homeTeam" onchange="setEventSite('team')"></label> </div> 

JavaScript function code:

 function setEventSite(chosen) { var neutralInd = document.getElementById("neutralInd"); // Toggle var locationOverride = document.getElementById("locationOverride"); // Text field var homeTeam = document.getElementsByName("homeTeam"); // Radio buttons if (chosen == "neutral") { // Toggle was clicked (changed) if (neutralInd.checked) { locationOverride.readOnly = false; for(var i=0; i<homeTeam.length; i++) { homeTeam[i].checked = false; } } else { locationOverride.value = ""; locationOverride.readOnly = true; } } else if (chosen == "team") // Radio button was selected { neutralInd.checked = false; neutralInd.value="off"; locationOverride.value = ""; locationOverride.readOnly = true; } } 

When I choose a Radio Button, it successfully sets the Text field to Readonly, but the Bootstrap Toggle does not appear to toggle (it remains set to Yes when it should switch to No). However, when I click the Toggle again, it stays on Yes yet executes the JavaScript as if it were being set to Yes. So that makes me think the value of the Toggle is successfully being set to No when I select a Radio Button, but the Toggle isn't displaying/animating the toggle to No. So maybe I'm asking how to make the Toggle show the animation of toggling to No.

Thanks!

Answer 1

Figured it out with the help of a good friend.

I needed to add the "off" class to the parent element of the Toggle when the radio button was selected. So I had to add 2 lines to the function, and it works as desired:

 var parentInd = $("#neutralInd").parent(); parentInd.addClass("off"); 

So here is the resulting function code:

  function setEventSite(chosen) { var neutralInd = document.getElementById("neutralInd"); var locationOverride = document.getElementById("locationOverride"); var homeTeam = document.getElementsByName("homeTeam"); var parentInd = $("#neutralInd").parent(); if (chosen == "neutral") { if (neutralInd.checked) { locationOverride.readOnly = false; for(var i=0; i<homeTeam.length; i++) { homeTeam[i].checked = false; } } else { locationOverride.value = ""; locationOverride.readOnly = true; } } else if (chosen == "team") { neutralInd.checked = false; neutralInd.value="off"; parentInd.addClass("off"); locationOverride.value = ""; locationOverride.readOnly = true; } }