Button only toggles once; button display doesn't have border

[BruceInCalgary]

I have an ASP.NET Core web application using VS 2017 and Bootstrap 4.3.1 and javascript 3.4.1. I have added the bootstrap-toggle option to 3 checkboxes on a simple booking options razor page. When I first added the bootstrap-toggle it worked fine except that the toggle control was a solid color and didn't have the nice border look. However, now, without having made a change to the web page, the toggle controls only toggle once when clicked, and once clicked they won't toggle any more. I have no code associated with the events for these toggle buttons (which are checkboxes of course). Here is my code for these controls:

                    <div class="form-group pr-3">
                        <label asp-for="BookingOptions.PersonalServices">Personal Services: </label>
                        <input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" class="form-check-input" id="cbPersonalService" asp-for="BookingOptions.PersonalServices">
                        <span asp-validation-for="BookingOptions.PersonalServices" class="text-danger"></span>
                    </div>

                    <div class="form-group pr-3">
                        <label asp-for="BookingOptions.PersonalTraining">Personal Training: </label>
                        <input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" class="form-check-input" id="cbPersonalTraining" asp-for="BookingOptions.PersonalTraining">
                        <span asp-validation-for="BookingOptions.PersonalTraining" class="text-danger"></span>
                    </div>

                    <div class="form-group pr-3">
                        <label asp-for="BookingOptions.CourtBookings">Court Bookings: </label>
                        <input type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" class="form-check-input" id="cbCourtBookings" asp-for="BookingOptions.CourtBookings">
                        <span asp-validation-for="BookingOptions.CourtBookings" class="text-danger"></span>
                    </div>

                </div>

[kueblertgb]

Hi i have the same Issue,

Jquery: jquery-3.4.1.min.js
Bootsrap 431: bootstrap.min.js and bootstrap.bundle.min.js
Bootsrap Toggle Vers 3.5.0: bootstrap4-toggle.min.js

I run the basic example
<input id="chkToggle1" type="checkbox" data-toggle="toggle" checked>

in Crome with F12 , this code ist shown

<div class="toggle btn btn-primary" data-toggle="toggle" role="button" style="width: 61.0781px; height: 38px;">
	<input id="chkToggle1" type="checkbox" data-toggle="toggle" checked="">
    <div class="toggle-group">
        <label class="btn btn-primary toggle-on">On</label>
        <label class="btn btn-light toggle-off">Off</label>
        <span class="toggle-handle btn btn-light"></span>
    </div>
</div>

<div class="toggle-group">
    <label class="btn btn-primary toggle-on">On</label>
    <label class="btn btn-light toggle-off">Off</label>
    <span class="toggle-handle btn btn-light"></span>
</div>

Please Help me

by the way the code implementation here is buggy
the first div statement was cleard by the code tag in this webseide edtior.
but in the real code this
"

"
is shown two times

[kueblertgb]

the first line is double

[c0d33]

In regards to the styling issue see this post #186.