How to use Checkbox inside Select options in Knock

Question

Hi I want to add checkbox for all the options in dropdown.

My HTML is like this -

<div class="multi-select-dd-list"> 
    <div id="checkboxes" class="patient-list-selection">                
      <select class="patient-list-select specialty-list-left" data-bind="options : specialtiesList, optionsText : 'name'">
      </select>
    </div> 
</div>

So here I am binding specialtiesList.

What I want is a way to use checkbox before each option of the dropdown. Any suggestions?

Answer 1

Here's the code implementing the same. I think you are looking something like this.

.js, .css and .html file

function CheckableBox(label, isChecked) {
  this.label = label;
  this.isChecked = ko.observable(isChecked || false);
}

function ViewModel() {
  this.items = [
    new CheckableBox("First", true),
    new CheckableBox("Second", true),
    new CheckableBox("Third")
  ];
  
  this.selectedItems = ko.observableArray();

	/* Includes only the checked items */
  this.tempSelection = ko.pureComputed(function() {
    return this.items.filter(function(item) {
      return item.isChecked();
    });
  }, this);
  
  /* Builds a comma separated string of selected items */
  this.selectedItemsStr = ko.pureComputed(function() {
  	var str = this.selectedItems()
    	.map(function(item) {
      	return item.label;
      })
      .join(", ")
      
      return str || "-- No options selected --";
  }, this);
  
  /* Determines whether the selectable options are displayed. */
  this.optionsShown = ko.observable(false);
  
  this.optionsShown.subscribe(function() {
  	this.updateSelections();
  }, this);
  
  this.confirmSelection();
};

ViewModel.prototype.toggleOptions = function() {
	this.optionsShown(!this.optionsShown());
};

ViewModel.prototype.confirmSelection = function() {
	this.selectedItems(this.tempSelection());
  this.closeOptions();
};

ViewModel.prototype.closeOptions = function() {
  this.optionsShown(false);
}

ViewModel.prototype.updateSelections = function() {
	var selection = this.selectedItems();
  this.items.forEach(function(item) {
    item.isChecked(~selection.indexOf(item));
  });
}

ko.applyBindings(new ViewModel());

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

.main-container {
  width: 400px;
}

.main-container,
.select-container {
  position: relative;
}

.select-container {
  height: 2em;
}

select,
.select-container::after {
  width: 100%;
  height: 100%;
}

.select-container::after {
  content: "";
  position: absolute;
  top: 0;
  background: rgba(0,0,0,0);
  display: block;
}

.options-container {
  position: absolute;
  top: 2em;
  width: 100%;
  border: 1px solid #A9A9A9;
  background: #FFFFFF;
  display: none;
}

.options-container.shown {
  display: block;
}

label {
  display: block;
  padding: .2em;
}

label:not(:last-child) {
  border-bottom: 1px solid #FFFFFF;
}

.checked {
  background: #568ECB;
  color: white;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #A9A9A9;
  background: #F6F6F6;
}

.button-container button {
  margin: .4em;
  margin-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="main-container">
  <div class="select-container" data-bind="click: toggleOptions">
    <select data-bind="options: [selectedItemsStr]"></select>
  </div>
  <div class="options-container" data-bind="css: { 'shown': optionsShown }">
    <div class="options" data-bind="foreach: items">
      <label data-bind="css: { 'checked': isChecked }">
        <input type="checkbox" data-bind="checked: isChecked">
        <span data-bind="text: label"></span>
      </label>
    </div>
    <div class="button-container">
      <button type="button" data-bind="click: confirmSelection">OK</button>
      <button type="button" data-bind="click: closeOptions">Cancel</button>
    </div>
  </div>
</div>

Answer 2

    	$(document).ready(function() {
    	$('select').material_select();
    	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
     
     <div class="input-field col s12">
        <select multiple>
          <option value="" disabled selected>Choose your option</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <label>Materialize Multiple Select</label>
      </div>