HTML View Select Element As a Grid with Clickable Elements

jQuery grid picker plugin that transforms a regular checkbox into a grid picker containing a horizontal set of selectable / non-selectable toggle buttons similar to the split control in iOS.

Must Read: Intuitive Asterism Custom Select Element In Pure Javascript

How to make use of it:

1. Add the jQuery library and the Grid picker plugin to the HTML web page.

<link rel="stylesheet" href="/path/to/src/jquery-grid-picker.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/jquery-grid-picker.js"></script>

2. Call the function gridPicker on the goal select box.

<select class="select">
  <option value="ford">Ford</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="bmw">Bmw</option>
  <option value="volvo">Volvo</option>
</select>

<select class="select" multiple>
  <option value="ford">Ford</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="bmw">Bmw</option>
  <option value="volvo">Volvo</option>
</select>

3. Determine if the options are selectable & unselectable.

$(".select").gridPicker({
  canSelect: function(element) {
    return !$(element).is(":disabled");
  },
  canUnselect: function(element) {
    return typeof this._$ui.element.attr("multiple") !== "undefined";
  }
})

4. Customize the render function.

$(".select").gridPicker({
  render: function(element) {
    return $("<a />")
    .attr("href", "#")
    .attr("title", label)
    .text(label)
    .get(0);
  }
})

5. the default styles of the grid picker.

$(".select").gridPicker({
  canSelect: function(element) {
    return !$(element).is(":disabled");
  },
  canUnselect: function(element) {
    return typeof this._$ui.element.attr("multiple") !== "undefined";
  }
})