List Multiselect

Allow for multiple row items to be selected with a limit

by cvalleskey

HTML

<ul class="list">
  <li class="">List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
  <li>List Item 7</li>
</ul>

CSS

body {
  background: #F4F4F4;
  color: #2A2A2A;
  font: 16px/1.5 Century Gothic, sans-serif;
}

.list {
  list-style: none;
  border-top: 1px solid #DDD;
  margin: 0;
  padding: 0;
}

.list li {
  border-bottom: 1px solid #DDD;
  padding: 1em;
  background: #FFF;
  display: block;
  cursor: pointer;
}

.list li:active {
  background: #F9F9F9;
}

.list li.active:after {
  content: "✔";
  float: right;
  display: inline-block;
  width: 1em;
  font-weight: bold;
  margin-left: 0.5em;
  text-align: center;
  color: #1CB076;
}

JavaScript

var activeItems = [];
var maxActive = 2;

$('.list li').click(function(e) {
	var index = activeItems.indexOf(e.target);
  if(index > -1) {
		$(this).removeClass('active');
    activeItems.splice(index, 1);
  } else {
  	activeItems.unshift(e.target);
    $(this).addClass('active');
  }
  if(activeItems.length > maxActive) {
  	$(activeItems[activeItems.length-1]).removeClass('active');
  	activeItems.pop();
  }
});