javascript - list js with checkboxes -
im using list js on html list checkboxes , trying populate values object in :
var values = [ { id: 12, action: 'a', ... }, { id: 13, action: 'b', ... } ]; html :
<div id="users"> <ul class="list"> <li> <span class="id"></span> <span class="action"></span > <input class="required" type="checkbox">required </li> </ul> </div> and initializing in :
new list('users', options, values); how make work?
just clearify im missing how complete values object , how define option object init check state of checkboxes initially.
create options variable , add object { name: 'required', attr: 'checked'} other property names. pass options parameter new list created.
update:
based on comment, don't think possible using list.js, if willing add jquery application, small hack incorporate.
add $("input[checked='false']").prop('checked', false); code once list created.
note: wanna add above line asynchronously, once entire list populated, in case working lot of data.
demo -
var options = { valuenames: ['id', 'action', { name: 'required', attr: 'checked' }], item: 'user-item' }; var values = [{ id: 12, action: 'a', required: false }, { id: 13, action: 'b', required: true } ]; var userlist = new list('user-list', options, values); //once entire list populated, set checked='false' checkboxes unchecked state. $("input[checked='false']").prop('checked', false); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> <div id="user-list"> <ul class="list"></ul> </div> <div style="display:none;"> <!-- template element needed when list empty, todo: needs better solution --> <li id="user-item"> <span class="id"></span> <span class="action"></span > <input class="required" type="checkbox" />required </li> </div>
Comments
Post a Comment