ignore
Type String|Array|Boolean
Default false
Define descendants of selectable elements that can be clicked. Can be a CSS3 selector string or an array of CSS3 selector strings. Any descendant defined will not trigger the instance to start selecting / toggling when clicked on.
This can be handy if the selectable elements have interactive elements within them, e.g. buttons, checkboxes or dropdowns.
Demo
Allow interaction only with elements with the .form-control
className.
Markup
<ul>
<li class="item">
<p>All elements below will NOT trigger selection. I will, though.</p>
<input class="form-control form-control-sm" placeholder="Start typing..." type="text">
<input class="form-control form-control-sm" type="range">
<label class="form-control form-control-sm" for="check-1"><input id="check-1" type="checkbox"> Check me</label>
<select class="form-control form-control-sm">
<option value="">Select me</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button type="button" class="btn btn-light btn-sm form-control form-control-sm">Click me</button>
</li>
...
</ul>
Javascript
new Selectable({
filter: ".item",
ignore: ".form-control" // or ["label", "button", "select"]
});