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

BruceInCalgary commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

the first line is double

c0d33 commented 5 years ago

In regards to the styling issue see this post https://github.com/minhur/bootstrap-toggle/issues/186.

minhur / bootstrap-toggle

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