Moving items from one listbox to another listbox through jquery

Question

enter image description here I am trying to move items from one list to another on checkbox check but actually 1st list are select options and checked property is not coming in jquery , can anybody help how to achieve this ?

 $(document).ready(function() { //Once a field selected / deslected, update UI List $('#GridFields').bind('change', function(option, checked, select) { var selectedval = $('#GridFields option:selected').last().val(); if ($('.sort-selected li[field-id="+selectedval+"').length > 0) { $('.sort-selected').remove(selectedval); } else { $('.sort-selected').append('<li class="list-group-item" field-id="' + $(this).find(':selected').last().val() + '">' + $(this).find(':selected').last().text() + '</li>'); $('.sort-selected').animate({ scrollTop: $(".sort-selected")[0].scrollHeight }, 1000); } enableSort(); }); 

 <div class="form-group"> <select class="form-control input-sm multiselect" id="GridFields" multiple="multiple" name="GridFields" style="display: none;"> <option disabled="disabled" value="Remedy_Short_ID">Request ID</option> <option value="Actuals_Per_Day">Actuals Per Day</option> </select> <div class="btn-group open" style="width: 100%;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Request ID, Summary, Request Category, Product Name, Comp Progress Level" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" aria-expanded="true"> <ul class="multiselect-container dropdown-menu" style="-ms-overflow-x: hidden; -ms-overflow-y: auto; max-height: 300px;"><li class="multiselect-item filter"><div class="input-group input-group-sm"> --First Five Elements <li class="disabled active"><a tabindex="-1"><label class="checkbox"><input type="checkbox" value="Comp_Progress_Level"> Comp Progress Level</label></a></li> --Remaining Elements <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Actuals_Per_Day"> Actuals Per Day</label></a></li> </ul> </div> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3"> <div class="form-group"> @Html.Label("Layout Columns", "Layout Columns", new { @class = "form-label" }) @Html.ListBox("GridFields", CommonEntities.getGridFieldsMultiList(), new { @class = "form-control input-sm multiselect"}) </div> </div> <div class="col-md-3"> <div class="panel panel-custom1"> <div class="panel-heading">Display Order (Drag n Drop an Item)</div> <ul class="list-group sort-selected" style="height:276px;overflow-y:auto"> <li class="list-group-item disabled" field-id="">Request ID</li> <li class="list-group-item disabled" field-id="">Summary</li> <li class="list-group-item disabled" field-id="">Request Category</li> <li class="list-group-item disabled" field-id="">Product Name</li> <li class="list-group-item disabled" field-id="">Comp Progress Level</li> </ul> </div> </div> 

Answer 1

Based on your description, following should work :

 $(document).ready(function() { //Once a field selected / deslected, update UI List $('#GridFieldsWrap input[type=checkbox]').bind('change', function() { $('#GridFieldsWrap input[type=checkbox]').each(function() { if ($(this).is(":checked")) { if ( $(".sort-selected li[field-id=" + $(this).val() + "]").length==0) { $('.sort-selected').append('<li class="list-group-item" field-id="' + $(this).val() + '">' + $(this).parent().text() + '</li>'); } } else { $(".sort-selected li[field-id=" + $(this).val() + "]").remove() } }) $('.sort-selected').animate({ scrollTop: $(".sort-selected")[0].scrollHeight }, 1000); }) //enableSort(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3"> <div class="form-group" id="GridFieldsWrap"> <ul id="GridFields"> <li class="disabled active"><a tabindex="-1"><label class="checkbox" ><input type="checkbox" value="Request_ID" checked> Request ID</label></a></li> <li class="disabled active"><a tabindex="-1"><label class="checkbox" ><input type="checkbox" checked value="Summary"> Summary</label></a></li> <li class="disabled active"><a tabindex="-1"><label class="checkbox"><input type="checkbox" checked value="Request_Category"> Request Category</label></a></li> <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Product_Name"> Product Name</label></a></li> <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Comp_Progress_Level"> Comp Progress Level</label></a></li> </ul> </div> </div> <div class="col-md-3"> <div class="panel panel-custom1"> <ul class="list-group sort-selected" style="height:100px;overflow-y:auto"> <li class="list-group-item disabled" field-id="Request_ID">Request ID</li> <li class="list-group-item disabled" field-id="Summary">Summary</li> <li class="list-group-item disabled" field-id="Request_Category">Request Category</li> </ul> </div> </div> 

Answer 2

Adding id="GridFieldsWrap" on the form level helps you to get the checkbox property checked.

In List options if you want, checkbox property checked, please try to add one level above the id property and check there if checkbox property appears.