Eingabe-Typ Kontrollkästchen in HTML-Text funktioniert nicht

Question

Ich habe folgenden Dialog für Sweetalert definiert. Alles funktioniert gut, aber das Kontrollkästchen wird nicht angezeigt. Muss ich noch etwas ändern? Ich habe genug gesucht, aber keine Lösung gefunden, die funktioniert.

Sweetalert Dialog:

swal({ title: "Are you sure?", text:" <form><input type='checkbox' name='vehicle' value='Bike'>I have a bike<br></form> Workload will be validated by you for cbs merge! <div class='text-danger'>" +wl_name+ "</div>" , 
            showCancelButton: true, type: "info", 
            confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, validate it!", cancelButtonText: "No, cancel pleaase!", 
            closeOnConfirm: false, closeOnCancel: false, html:true , showLoaderOnConfirm: true},) 

Alle anderen HTML-Tags arbeiten fine..only dieses Kontrollkästchen ist auf sweetalert Popup-Modell nicht sichtbar.

Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen.

Answer 1

SweetAlert unterstützt keine benutzerdefinierten Formulareingaben, aber SweetAlert2 tut :), Nicht sicher, was mit ihrer CSS obwohl.

JSFIDDLE

$('document').ready(function() { 
    $(document).on('click', '.test', function() { 
    swal({ 
     title: "Are you sure?", 
     html: '<form><input type="checkbox">I have a bike<br></form> Workload will be validated by you for cbs merge! <div class="text-danger">test</div>', 
     showCancelButton: true, 
     type: "input", 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes, validate it!", 
     cancelButtonText: "No, cancel pleaase!", 
     closeOnConfirm: true, 
     closeOnCancel: true, 
     showLoaderOnConfirm: true, 
    }); 
    }); 
}); 

Answer 2

Es ist eine nette Art checkbox modale Art in SweetAlert2 zu verwenden:

swal({ 
 
    title: 'Do you have a bike?', 
 
    input: 'checkbox', 
 
    inputPlaceholder: 'I have a bike' 
 
}).then(function(result) { 
 
    if (result.value) { 
 
    swal({type: 'success', text: 'You have a bike!'}); 
 

 
    } else if (result.value === 0) { 
 
    swal({type: 'error', text: "You don't have a bike :("}); 
 

 
    } else { 
 
    console.log(`modal was dismissed by ${result.dismiss}`) 
 
    } 
 
})

<script src="https://unpkg.com/sweetalert2@7.3.0/dist/sweetalert2.all.js"></script>