<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.js"></script>
<link data-require="bootstrap@4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap@4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js" type="text/javascript" defer="defer"></script>
</head>
<body>
<h1 class="header-line">
KO binding hasFocus over boolean values
</h1>
<div class="form-group row" data-bind="click: onArbitrary">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
<input name="discount" type="radio" value="arbitrary" data-bind="checked: discountValue" />
</div>
<div class="col-xs-4">
<label for="arbitrary">Discount arbitrary</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="arbitrary" placeholder="Enter arbitrary discount" data-bind="enable: enableArbitrary, value: arbitrary, hasFocus: focusArbitrary">
</div>
</div>
<div class="form-group row" data-bind="click: onPercent">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
<input name="discount" type="radio" value="percent" data-bind="checked: discountValue" />
</div>
<div class="col-xs-4">
<label for="percent">Discount percent</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="percent" placeholder="Enter percent of discount" data-bind="enable: enablePercent, value: percent, hasFocus: focusPercent">
</div>
</div>
<div class="form-group row" data-bind="click: onPermanent">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
<input name="discount" type="radio" value="permanent" data-bind="checked: discountValue" />
</div>
<div class="col-xs-4">
<label for="permanent">Discount permanent</label>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" id="permanent" placeholder="Enter permanent discount" data-bind="enable: enablePermanent, value: permanent, hasFocus: focusPermanent">
</div>
</div>
</body>
</html>
// Code goes here
var DiscountViewModel = function() {
var self = this;
self.arbitrary = ko.observable();
self.percent = ko.observable();
self.permanent = ko.observable();
self.discountValue = ko.observable('arbitrary');
self.enableArbitrary = ko.observable(true);
self.enablePercent = ko.observable(false);
self.enablePermanent = ko.observable(false);
self.focusArbitrary = ko.observable(true);
self.focusPercent = ko.observable(false);
self.focusPermanent = ko.observable(false);
self.onArbitrary = onArbitrary;
self.onPercent = onPercent;
self.onPermanent = onPermanent;
function onArbitrary() {
if (!self.enableArbitrary()) {
self.discountValue('arbitrary');
}
}
function onPercent() {
if (!self.enablePercent()) {
self.discountValue('percent');
}
}
function onPermanent() {
if (!self.enablePermanent()) {
self.discountValue('permanent');
}
}
self.discountValue.subscribe(function(newValue) {
if (newValue == 'arbitrary') {
self.enableArbitrary(true);
self.focusArbitrary(true);
} else {
self.enableArbitrary(false);
}
if (newValue == 'percent') {
self.enablePercent(true);
self.focusPercent(true);
} else {
self.enablePercent(false);
}
if (newValue == 'permanent') {
self.enablePermanent(true);
self.focusPermanent(true);
} else {
self.enablePermanent(false);
}
});
};
var vm = new DiscountViewModel();
ko.applyBindings(vm);
/* Styles go here */
.header-line {
margin-bottom:20px;
margin-top:20px;
margin-left:20px;
}
A simple example for KO binding hasFocus over boolean values
I took this example from jsfiddle and adapted it to plnkr.co
original link:
[https://jsfiddle.net/astrapi69/zu398Lvu/](https://jsfiddle.net/astrapi69/zu398Lvu/)