How to bind change event for checkbox in knockout js?
I am using bootstrap switch to show a checkbox as a toggle, and I want to bind a function to that switch, so data binding click
doesn't help here because the checkbox is not clicked. So I probably need a "modify" data binding, like an event onChange
that has a checkbox, but that didn't work when I tried to bind the data binding change
to the checkbox ...
Here is the data binding:
<input type="checkbox" onText="Active" offText="Inactive"
data-bind="bootstrapSwitchOn: ActiveFlag, change: function() { UpdateStatus() }" />
The radio button sets the checkbox:
<div class="has-switch" tabindex="0"
<div class="switch-on">
<span class="switch-left">Active</span
<label> </label
<span class="switch-right">Inactive</span>
<input type="checkbox" ontext="Active" offtext="Inactive"
data-bind="bootstrapSwitchOn: ActiveFlag, change: function() { UpdateStatus() }">
</div>
</div>
Check the box display:"none"
so it won't click, but its state changed when the radio button was clicked
source to share
Expanding on comment :
- You have an observable name
ActiveFlag
associated with the bindingbootstrapSwitchOn
that is updated when you toggle the bootstrap switch. - And Knockoutjs has the ability to allow registration of change callbacks on observables.
With these considerations in mind, if you have an observable that is related to changes in your switch and you want to call some function when those changes are switched, you can register your function as a callback to listen for changes in the observable.
Hopefully this snippet can explain this logic:
/**
* Knockout binding handler for bootstrapSwitch indicating the status
* of the switch (on/off): https://github.com/nostalgiaz/bootstrap-switch
*/
ko.bindingHandlers.bootstrapSwitchOn = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$elem = $(element);
$(element).bootstrapSwitch();
$(element).bootstrapSwitch('setState', ko.utils.unwrapObservable(valueAccessor())); // Set intial state
$elem.on('switch-change', function(e, data) {
valueAccessor()(data.value);
}); // Update the model when changed.
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var vStatus = $(element).bootstrapSwitch('state');
var vmStatus = ko.utils.unwrapObservable(valueAccessor());
if (vStatus != vmStatus) {
$(element).bootstrapSwitch('setState', vmStatus);
}
}
};
// your viewmodel bound to the web page
var vm = function() {
this.log = ko.observableArray([]);
// ActiveFlag observable bound to switch, synced with state of switch
this.ActiveFlag = ko.observable(false);
// the function I want to call whenever the switch state changes
var doSomethingWhenSwitchStateChanges = function(value) {
this.log.push('the switch state changed to: ' + value);
}.bind(this);
// register callback
var subscription = this.ActiveFlag.subscribe(doSomethingWhenSwitchStateChanges);
}
ko.applyBindings(new vm());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/2.0.0/css/bootstrap-switch.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/2.0.0/js/bootstrap-switch.min.js"></script>
<div class="row">
<div class="col-md-6">
<div>
<input type="checkbox" data-bind="checked: ActiveFlag" />
</div>
<div>
<input type="checkbox" data-bind="bootstrapSwitchOn: ActiveFlag" />
</div>
</div>
<div class="col-md-6" data-bind="foreach: log">
<p data-bind="text: $data"><p>
</div>
</div>
source to share