.bootstrapToggle('off') not working from change event

[BobWarren]

Hi,
Despite a few dozen attempts several different ways I cannot get either the .bootstrapToggle('off') or .prop('disabled', false).change() to work.

The scenario:
We have a web form with 2 notification toggles - notify managers and notify everyone. If someone toggles the everyone button then it should turn off the manager toggle and disable it.

_Layout._html
Added both:

<script defer type="text/javascript" src="~/lib/bootstrap-toggle/js/bootstrap-toggle.js"></script>
$("input[type='checkbox']").bootstrapToggle();

The form:

<tr>
    <td class="FormLabelColumn">
        <label asp-for="NotifyManagers" class="control-label"></label>
    </td>
    <td class="FormLoaderColumn"></td>
    <td class="FormValueColumn">
        <input id="NotifyManagers" asp-for="NotifyManagers" type="checkbox"
               data-toggle="toggle" data-width="100" data-height="36"
               data-on="<span class='far fa-check fa-fw'></span>On"
               data-off="<span class='far fa-times fa-fw'></span>Off"
               data-onstyle="success" data-offstyle="secondary" />
    </td>
    <td class="FormButtonColumn"></td>
    <td class="FormExtraColumn">
        <span asp-validation-for="NotifyManagers" class="text-danger"></span>
    </td>
</tr>
<tr>
    <td class="FormLabelColumn">
        <label asp-for="NotifyEveryone" class="control-label"></label>
    </td>
    <td class="FormLoaderColumn"></td>
    <td class="FormValueColumn">
        <input id="NotifyEveryone" asp-for="NotifyEveryone" type="checkbox"
               data-toggle="toggle" data-width="100" data-height="36"
               data-on="<span class='far fa-check fa-fw'></span>On"
               data-off="<span class='far fa-times fa-fw'></span>Off"
               data-onstyle="success" data-offstyle="secondary" />
    </td>
    <td class="FormButtonColumn"></td>
    <td class="FormExtraColumn">
        <span asp-validation-for="NotifyEveryone" class="text-danger"></span>
    </td>
</tr>

The Javascript:

// Function to handle changes in NotifyEveryone toggle
function ValidateNotifyEveryone() {
    // If on
    if ($("#NotifyEveryone").is(':checked')) {
        // alert('NotifyEveryone on'); // CONFIRMED working
        // If manager field is checked then uncheck it
        if($("#NotifyManager").is(':checked')) {
            $("#NotifyManager").bootstrapToggle('off');
        }
        // Disable the manager field
        $("#NotifyManager").prop('disabled', false).change(); // also tried .bootstrapToggle('disable');
    }
    else {
        // alert('NotifyEveryone off'); // CONFIRMED working
        // Enable the manager field
        $("#NotifyManager").prop('disabled', true).change(); // also tried .bootstrapToggle('enable');
    }
}
// When document is fully loaded
$(document).ready(function () {
    // When the NotifyEveryone toggle is changed
    $("#NotifyEveryone").on('change', function () {
        // Validate
        ValidateNotifyEveryone();
    });

Thanks in advance for all your help!

[itsKnight847]

@BobWarren Hi,
I just found that lib but I think I can help,
I have seen the demo's and they use the checked attribute instead of disabled (make's sense)
$('#toggle-trigger').prop('checked', true).change()
switch your disabled to checked (on input tags ofcourse).
let me know if it did worked for you

[Mahmoud-Ibrahim]

Hi Everyone,
I am facing the same problem, i am using toggle in a form,
i can't have the value in form POST because it is not considered checked, even i checked it manually.
so i tried to use $('#toggle-trigger').prop('checked', true).change();

in page ready function with no effect

$(document).ready(function() {
$('#IPV6t').prop('checked', true).change();
});

how i solved this problem:
by creating another hidden checkbox and use java script to replicate the status:

  $('#IPV6t').change(function() { 
          $('#IPV6t').val($(this).is(':checked'));                 
          $('#IPV6').prop('checked', $('#IPV6t').is(':checked'));
          $('#IPV6').val($('#IPV6t').is(':checked')); 
      }); 

jquery-3.5.1.min.js:2 Uncaught RangeError: Maximum call stack size exceeded
at String.replace ()
at X (jquery-3.5.1.min.js:2)
at G.get (jquery-3.5.1.min.js:2)
at Object.trigger (jquery-3.5.1.min.js:2)
at HTMLInputElement. (jquery-3.5.1.min.js:2)
at Function.each (jquery-3.5.1.min.js:2)
at S.fn.init.each (jquery-3.5.1.min.js:2)
at S.fn.init.trigger (jquery-3.5.1.min.js:2)
at S.fn.init.S.fn. [as change] (jquery-3.5.1.min.js:2)
at HTMLInputElement. ((index):287)