Knockout Visible Bindings on Modal

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<button class="btn btn-primary btn-lg" id="modalBtn">
  Launch demo modal
</button>

<section id="test-modal" class="modal fade" tabindex="-1" data-width="760">
      <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">Enviar Mensagem</h4>
    </div>
    <div class="modal-body">
        <div class="form-body">
            <div class="form-group">
                <label>Tipo de Mensagem</label>
                <div class="radio-list">
                    <label class="radio-inline">
                        <input type="radio"  data-bind="checked: radioSelectedOptionMessage" name="optionsRadiosMessageType" id="optionRadioFreeText" value="optionFreeText" class="make-switch optionsRadiosMessageType" checked >
                            Livre</input>
                    </label>
                    <label class="radio-inline">
                        <input type="radio"  data-bind="checked: radioSelectedOptionMessage" name="optionsRadiosMessageType" id="optionRadioStateRefresh" value="optionStateRefresh" class="make-switch optionsRadiosMessageType">
                        Pedido de Estado</input>
                    </label>
                </div>
            </div>
            <div class="form-group"  data-bind='visible: hasMessageTypeSelected'>
                <label for="inputSelectMessage">Seleccione a Mensagem</label>
                <div class="form-group">
                    <select id="inputSelectMessage" class="form-control select2"...

JavaScript

$("#modalBtn").click(function(){
    $('#test-modal').modal();
});

$('#test-modal').modal();

var ViewModel = function () {
    var self = this;
    
    self.radioSelectedOptionMessage = ko.observable("optionStateRefresh");
    
    // It only show dropdown when pre-defined option value is selected
    self.hasMessageTypeSelected = ko.computed(function () {
        return (self.radioSelectedOptionMessage() === "optionStateRefresh");
    });

    // It only show textarea when free text message option value is selected
    self.hasFreTextMessageSelected = ko.computed(function () {
        return (self.radioSelectedOptionMessage() === "optionFreeText");
    });  
    
};


ko.applyBindings(new ViewModel());