Bootstrap 3 radio buttons with Knocout 3

Default radio buttons with Knockout bindings and checkedValue binding, removed data-toggle="buttons" and added in CSS to hide the circle part of the input type="radio"

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.3.0.debug.js"></script>
<p>
     Currently selected: <span data-bind="text: selectedOption"></span>
</p>

<div class="btn-group-vertical">
    <label class="btn btn-lg btn-primary" data-bind="css: { 'active': selectedOption() === 'Purchase Target Cat' }">
        <input type="radio" name="options" id="option1" data-bind="checked: selectedOption, checkedValue: 'Purchase Target Cat'">Purchase Target Cat
    </label>
    <label class="btn btn-lg btn-primary" data-bind="css: { 'active': selectedOption() === 'Purchase Existing Cat' }">
        <input type="radio" name="options" id="option2" data-bind="checked: selectedOption, checkedValue: 'Purchase Existing Cat'">Purchase Existing Cat
     </label>
     <label class="btn btn-lg btn-primary" data-bind="css: { 'active': selectedOption() === 'Existing Dog Purchases Target Cat' }">
        <input type="radio" name="options" id="option3" data-bind="checked: selectedOption, checkedValue: 'Existing Company Purchases Target Company'">Existing Dog Purchases Target Cat
     </label>
</div>

CSS

label.btn > input[type='radio']
{
    display: none;
}

JavaScript

var viewModel = function () {
    var self = this;

    self.selectedOption = ko.observable("Target Cat");
}

    var vm = new viewModel();

    ko.applyBindings(vm);