I have a form wizard that has a checkbox in it. I am using bootstrap switch to display a toggle button to the user. Every time the user click on the button, it should display YES or NO (for check/uncheck). However, the click event does not work unless I do one of the following:
Comment the bootstrap switch code
$("[type='checkbox']").bootstrapSwitch();
Add a click event using delegate
$('#UserForm').on('click', '#checkbox1', function () { console.log('you click me'); });
$(document).ready(function() {
// $("[type='checkbox']").bootstrapSwitch();
//comment out the above line code.
});
var form = $("#UserForm").show();
form.steps({
headerTag: "h3",
bodyTag: "fieldset",
transitionEffect: "slideLeft",
onStepChanging: function(event, currentIndex, newIndex) {
// Allways allow previous action even if the current form is not valid!
if (currentIndex > newIndex) {
return true;
}
// Forbid next action on "Warning" step if the user is to young
if (newIndex === 3 && Number($("#age-2").val()) < 18) {
return false;
}
// Needed in some cases if the user went back (clean up)
if (currentIndex < newIndex) {
// To remove error styles
form.find(".body:eq(" + newIndex + ") label.error").remove();
form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
}
form.validate().settings.ignore = ":disabled,:hidden";
/// return form.valid();
return ValidForm(this, currentIndex);
},
onStepChanged: function(event, currentIndex, priorIndex) {
// Used to skip the "Warning" step if the user is old enough.
if (currentIndex === 2 && Number($("#age-2").val()) >= 18) {
form.steps("next");
}
// Used to skip the "Warning" step if the user is old enough and wants to the previous step.
if (currentIndex === 2 && priorIndex === 3) {
form.steps("previous");
}
},
onFinishing: function(event, currentIndex) {
return ValidForm(this, currentIndex);
// return form.valid();
},
onFinished: function(event, currentIndex) {
submitForm();
}
}).validate({
errorPlacement: function errorPlacement(error, element) {
element.before(error);
},
rules: {
confirm: {
equalTo: "#password-2"
}
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form action="#" id="UserForm" class="wizard-big wizard clearfix form-horizontal" role="application" novalidate="novalidate">
<h3>User</h3>
<fieldset>
<input type="checkbox" id="checkbox1" name="checkbox1" />
</fieldset>
</form>Updated on 03/22/16
If I remove the piece of code below, the click event fire with no problem.
$("[type='checkbox']").bootstrapSwitch();
Ok so Finally i got some solution .
instead of
$('#UserForm').on('click', '#checkbox1', function () { console.log('you click me'); });
add this code and you will get an event when it will be changed.
$('#checkbox1').on('switchChange.bootstrapSwitch', function (e, state) {
if(state){
alert("Checked");
// Your Code Here
}else{
alert("Not Checked");
// Your Code Here
}
});
or check my entire HTML
<!Doctype html>
<html>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form action="#" id="UserForm" class="wizard-big wizard clearfix form-horizontal" role="application" novalidate="novalidate">
<h3>User</h3>
<fieldset>
<input type="checkbox" id="checkbox1" name="checkbox1" />
</fieldset>
</form>
<script>
$(document).ready(function() {
$("[type='checkbox']").bootstrapSwitch();
//comment out the above line code.
});
var form = $("#UserForm").show();
form.steps({
headerTag: "h3",
bodyTag: "fieldset",
transitionEffect: "slideLeft",
onStepChanging: function(event, currentIndex, newIndex) {
// Allways allow previous action even if the current form is not valid!
if (currentIndex > newIndex) {
return true;
}
// Forbid next action on "Warning" step if the user is to young
if (newIndex === 3 && Number($("#age-2").val()) < 18) {
return false;
}
// Needed in some cases if the user went back (clean up)
if (currentIndex < newIndex) {
// To remove error styles
form.find(".body:eq(" + newIndex + ") label.error").remove();
form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
}
form.validate().settings.ignore = ":disabled,:hidden";
/// return form.valid();
return ValidForm(this, currentIndex);
},
onStepChanged: function(event, currentIndex, priorIndex) {
// Used to skip the "Warning" step if the user is old enough.
if (currentIndex === 2 && Number($("#age-2").val()) >= 18) {
form.steps("next");
}
// Used to skip the "Warning" step if the user is old enough and wants to the previous step.
if (currentIndex === 2 && priorIndex === 3) {
form.steps("previous");
}
},
onFinishing: function(event, currentIndex) {
return ValidForm(this, currentIndex);
// return form.valid();
},
onFinished: function(event, currentIndex) {
submitForm();
}
}).validate({
errorPlacement: function errorPlacement(error, element) {
element.before(error);
},
rules: {
confirm: {
equalTo: "#password-2"
}
}
});
$('#checkbox1').on('switchChange.bootstrapSwitch', function (e, state) {
if(state){
alert("Checked");
// Your Code Here
}else{
alert("Not Checked");
// Your Code Here
}
});
</script>
</html>