dr = new Selectables({
      zone:'#div',
      elements: 'li',     
      onSelect:function(element){
         console.log(element);
      }
});
  
//later
dr.disable();
 
// enable again
dr.enable();

// set options
dr.options.key='altKey';

{
    // root element whith selectables.
    zone: "#wrapper",

    //  items to be selectable .list-group, #id > .class,'htmlelement' - valid querySelectorAll
    elements: "li",

    // class name to apply to seleted items        
    selectedClass: 'active',

    //  event on selection start        
    start: function (e) {
       console.log('Starting selection on ' + this.elements + ' in ' + this.zone);
    },

    // event on selection end        
    stop: function (e) {
       console.log('Finished selecting   ' + this.elements + ' in ' + this.zone);
    },

    // event fired on every item when selected.
    onSelect: function (el) {
        console.log(el)
       console.log('onselect', el);
    },

    // event fired on every item when selected.
    onDeselect: function (el) {
       console.log('ondeselect', el);
    },

    // activate using optional key
    key: false, //'altKey,ctrlKey,metaKey,false   

    // add more to selection
    moreUsing: 'shiftKey', //altKey,ctrlKey,metaKey

    //false to .enable() at later time   

    enabled: true

}

onSelect: function (el) {
    el.querySelector('input').setAttribute('checked', 'checked');
},
onDeselect: function (el) {
    el.querySelector('input').removeAttribute('checked');
}
                    

    Selectables.prototype.selectAll = function () {
        var opt = this.options;
        this.foreach(document.querySelector(opt.zone).querySelectorAll(opt.elements), function (el) {
            if(!el.classList.contains(opt.selectedClass){
                el.classList.add(opt.selectedClass);
                opt.onSelect && opt.onSelect(el);
            }   
        });
    };