enter image description here我试图通过复选框检查将项目从一个列表移动到另一个列表,但实际上第一个列表是选择选项,并且检查的属性不是jquery,有人可以帮助如何实现这个目标吗?
$(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;
答案 0 :(得分:0)
根据您的描述,以下内容应该有效:
$(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>
答案 1 :(得分:0)
在表单级别添加id="GridFieldsWrap"
可帮助您检查复选框属性。
如果需要,在列表选项中选中复选框属性,请尝试在id属性上方添加一个级别,并检查复选框属性是否出现。