demo.html

<!DOCTYPE html>
<html>
<head>
	<title>Pure js multiselect demo</title>

	<link href="styles/multiselect.css" rel="stylesheet"/>
	<script src="multiselect.min.js"></script>
	<style>
		/* example of setting the width for multiselect */
		#testSelect1_multiSelect {
			width: 200px;
		}
	</style>
</head>
<body>
<select id='testSelect1' multiple>
	<option value='1'>Item 1</option>
	<option value='2' selected>Item 2</option>
	<option value='3' selected>Item 3</option>
	<option value='4'>Item 4</option>
	<option value='5'>Item 5</option>
</select>

<div>
	<button onclick="enable()">Enable</button>
	<button onclick="disable()">Disable</button>
</div>

<script>
	document.multiselect('#testSelect1')
		.setCheckBoxClick("checkboxAll", function(target, args) {
			console.log("Checkbox 'Select All' was clicked and got value ", args.checked);
		})
		.setCheckBoxClick("1", function(target, args) {
			console.log("Checkbox for item with value '1' was clicked and got value ", args.checked);
		});

	function enable() {
		document.multiselect('#testSelect1').setIsEnabled(true);
	}

	function disable() {
		document.multiselect('#testSelect1').setIsEnabled(false);
	}
</script>
</body>