Question

我的一个表单有八组复选框。使用AJAX和jQuery从数据库填充表单。大多数复选框集都可以正确加载，但有四个不能正确加载。每种情况下使用的代码之间似乎没有什么区别，经过几个小时的测试，我无法确定是什么原因导致这四种失败。

一个区别是失败的四个使用UUID作为值。当我将这些值更改为数字时，代码可以正常工作。但是，其他两个复选框集也使用UUID，并且它们可以正常工作。失败的四个格式不同且更复杂，因此我删除了该格式无济于事。

这是所有复选框的格式。此示例是从一个失败的复选框集中复制的（共有83个成员，但我将为您省去完整的列表）：

<input id='interest1' name='interest[]' type='checkbox' value='74095951-F0EF-441C-85F4-949304FF6B89' />
<label for="interest1">Civil rights</label>
<input id='interest2' name='interest[]' type='checkbox' value='3D8A60AC-732F-4522-A9A7-7E564F16C5DA' />
<label for="interest2">Domestic violence</label>

这是jQuery代码，用于设置所有复选框集，有效复选框和无效复选框的状态：

if($.isArray(value)){
  for(var i = 0; i < value.length; i++){
    $('input[type="checkbox"][name^="' + key + '"][value="' + value[i] + '"]').attr('checked', 'checked');
  }          
}

在每种情况下，value是一个简单的数组。

有人对我可以确定原因的测试有任何想法吗？

Answer 1

您可以简单地使用each函数对数组进行迭代。无需在CSS选择器中引用属性值，并且如注释中所述，您应该使用prop来设置布尔属性，例如checked，disabled等。

var key = 'interest';
var value = ['74095951-F0EF-441C-85F4-949304FF6B89', '3D8A60AC-732F-4522-A9A7-7E564F16C5DA'];

$.each(value, function(i, v) {
    $('input[type=checkbox][name^=' + key + '][value=' + v + ']').prop('checked', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='interest1' name='interest[]' type='checkbox' value='74095951-F0EF-441C-85F4-949304FF6B89' />
<label for="interest1">Civil rights</label>
<input id='interest2' name='interest[]' type='checkbox' value='3D8A60AC-732F-4522-A9A7-7E564F16C5DA' />
<label for="interest2">Domestic violence</label>
<input id='interest3' name='interest[]' type='checkbox' value='3D8A60AC-732F-4522-A9A7-7E564F16C5DB' />
<label for="interest3">Some other thing</label>

Answer 2

问题解决了。

用于生成引起问题的四组复选框的查找表的UUID为大写。但是测试数据是小写的。

我很抱歉为此困扰名单。我深感尴尬。

现在，我将从https://stackoverflow.com/a/13833488/9428542了解到的标准将所有UUID转换为小写。

无法使用jQuery填充某些复选框

2 个答案: