Html ListBox

Set the checkboxes property of the jqxListBox. Author: http://jqwidgets.com

by txhi

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxListBox' oncontextmenu="return false"></div>

JavaScript

var source = [
  "Affogato",
  "Americano",
  "Bicerin",
  "Breve",
  "Café Bombón",
  "Café au lait",
  "Caffé Corretto",
  "Café Crema",
  "Caffé Latte" ];
// Create a jqxListBox
$("#jqxListBox").jqxListBox({
  source: source,
  width: '200px',
  height: '200px',
  theme:'energyblue',
  checkboxes: true
});

$('#jqxListBox').on('mousedown', function (event) {
  if (event.which == 3) {
  	var item = $("#jqxListBox").jqxListBox('getSelectedItem');
    if(item.checked) {
      $("#jqxListBox").jqxListBox('uncheckIndex', item.index); 
    } else {
      $("#jqxListBox").jqxListBox('checkIndex', item.index); 
    }
  }
});