Knockout.js - Form reset
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="bookform">
<input type="checkbox" id="checkbox1" data-bind="checked: checkBox1, click: checkboxStateChange"> Checkbox 1
<input type="checkbox" id="checkbox2" data-bind="checked: checkBox2, click: checkboxStateChange">Checkbox 2
<button type="button" id="myBtn" class="btn btn-primary submit-btn" data-bind="click: onButtonClick">Submit</button>
</div>
CSS
h3 {
font-size: 120%;
font-weight: bold;
margin-top: 5px;
}
#bookform {
margin: 10px;
padding: 20px 20px 25px 20px;
background-color: #eee;
}
input {
width: 100%;
padding: 4px;
}
.button {
margin: 12px 0 0 0;
}
JavaScript
$('.submit-btn').attr('disabled', true);
var checkbox1 = document.getElementById('checkbox1');
var checkbox2 = document.getElementById('checkbox2');
var ViewModel = function() {
var checkboxesChecked = false;
self.checkBox1 = ko.observable(false);
self.checkBox2 = ko.observable(false);
self.checkboxStateChange = function() {
if ((self.checkBox1() === true && self.checkBox2() === true) || ($("#checkbox2").length <= 0 && self.checkBox1() === true) || ($("#checkbox1").length <= 0 && self.checkBox2() === true)) {
$('.submit-btn').attr('disabled', false);
} else {
$('.submit-btn').attr('disabled', true);
}
return true;
}
};
ko.applyBindings(new ViewModel()); //