チェックボックスの使用方法ノックアウトのオプションを選択

Question

こんにちは私は、ドロップダウンのすべてのオプションのチェックボックスを追加したいと思います。

私のHTMLは、このようなものです -

<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>

だからここに私はspecialtiesListを結合しています。

私がしたいのは、ドロップダウンの各オプションの前にチェックボックスを使用する方法です。 提案がありますか？

Answer 1

ここで同じことを実行するコードです。私はあなたがこのようなものを探していると思う。

の.js、.cssのと.htmlのファイル

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(); 
 

 
\t /* 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() { 
 
    \t var str = this.selectedItems() 
 
    \t .map(function(item) { 
 
     \t 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() { 
 
    \t this.updateSelections(); 
 
    }, this); 
 
    
 
    this.confirmSelection(); 
 
}; 
 

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

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

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

 
ViewModel.prototype.updateSelections = function() { 
 
\t 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

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

<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>