<!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/)