Question

enter image description here我试图通过复选框检查将项目从一个列表移动到另一个列表，但实际上第一个列表是选择选项，并且检查的属性不是jquery，有人可以帮助如何实现这个目标吗？

＆＃13;

$(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();
  });

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

Answer 1

根据您的描述，以下内容应该有效：

$(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

在表单级别添加id="GridFieldsWrap"可帮助您检查复选框属性。

如果需要，在列表选项中选中复选框属性，请尝试在id属性上方添加一个级别，并检查复选框属性是否出现。

通过jquery将项目从一个列表框移动到另一个列表框

2 个答案: