私は次のように私が望むロジックで次のコードを持っています：
- ユーザーはスポーツを2回選択することはできません。ユーザーはスポーツをデータベースに保存している可能性があり、そのことを念頭に置いて、データベースレコードが読み込まれて表示され、リストに表示されていない限り、ユーザーはスポーツを追加できます。現在、Baseballをデータベースからのものとして設定していますが、もう一度選択すると、ロジックによってユーザーが再度追加できるようになります。私が間違っていることは何ですか？
JSFIDDLE： http: //jsfiddle.net/Jrqqq/
var allVals = [{ id: 1, value: "Baseball"}];
$.each(allVals, function (k, v) {
$("#results").append("<label class=\"wList\"><input checked=\"checked\" class=\"wList-chk\" name=\"wList[]\" type=\"checkbox\" value=\""
+ v.id
+ "\">"
+ v.value
+ "</label>");
});
$(function () {
var sports = [{ id: 1, value: "Baseball" },
{ id: 2, value: "Soccer" },
{ id: 3, value: "Basketball" },
{ id: 4, value: "Volleyball" },
{ id: 5, value: "Tennis" },
{ id: 6, value: "Running" },
{ id: 7, value: "Swimming"}];
$("#sports").autocomplete({
source: sports,
select: function (event, ui) {
if ($.inArray(ui.item.id, allVals) == -1) {
allVals.push(ui.item.id);
$("#results")
.append("<label class=\"wList\"><input checked=\"checked\" class=\"wList-chk\" name=\"wList[]\" type=\"checkbox\" value=\""
+ ui.item.id
+ "\">"
+ ui.item.value
+ "</label>");
$('input.wList-chk[type="checkbox"][value="' + ui.item.id + '"]').parent().effect('highlight', {}, 1500);
ui.item.value = "";
}
else {
ui.item.value = "";
$('input.wList-chk[type="checkbox"][value="' + ui.item.id + '"]').parent().effect('highlight', {}, 1500);
}
}
});
});
$(document).on("change", ".wList-chk", function () {
if ($(this).attr('checked')) {
return;
} else {
var thisVal = $(this).val();
var index = $.inArray(thisVal, allVals);
allVals.splice(index, 1);
$(this).parent('.wList').remove();
}
});