3 Boxes and Container

Enable a box based on the other three boxes

by db_dev

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="col">
            <div class="outer">

                    <div class="config" data-bind="visible: configRoot">Root</div>
                    <div class="config" data-bind="visible: configLogic">Logic</div>
                    <div class="config" data-bind="visible: configTask">Task</div>

            </div>

            <div>
                <input type="checkbox" data-bind="checked: configRoot" /> Root
                <input type="checkbox" data-bind="checked: configLogic" /> Logic
                <input type="checkbox" data-bind="checked: configTask" /> Task
            </div>


        </div>



    </div>
</div>

SCSS

.config {
    border: dashed 1px #b5ace5;
    padding: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 5px;
    &:last-child {
        margin: 0;
    }
}

.outer {
    border: dashed 2px #b5ace5;
    padding: 10px;
    background-color: #cdc6ef;
    border-radius: 5px;
    margin-top: 16px;
}

JavaScript

function viewModel() {
    var self = this;
    // Track 3 boxes
    self.configRoot = ko.observable(true);
    self.configLogic = ko.observable(true);
    self.configTask = ko.observable(true);
    
    self.checkedItems = ko.observableArray();
    
    
  
// everytime something is checked, put it in an array
// remove if unchecked
    
    
   	//self.selectedItems = ko.observableArray();

    // Track outer box
    self.configOuter = ko.computed({
        read: function() {
             

        },
        write: function(value) {

        }
    });

    // Track 3 buttons to hide and show each box


    // Compute if all thress boxes are !visble. If not, then hide outer box.


}


var goodViewModel = new viewModel();
ko.applyBindings(goodViewModel);