Laravel表单验证重载后用JavaScript设置checkbox旧选中值报错问题

你出现语法错误和无法正确赋值checked属性的核心原因是混淆了服务端Blade代码和客户端JavaScript代码的运行时机：

• Blade指令（@if、{{ }}等）是在服务端渲染页面阶段就执行完成的，此时客户端的JS变量calidad.id还不存在，你把JS变量拼到Blade逻辑里，服务端解析时会直接把'+calidad.id+'当成普通字符串处理，甚至触发语法错误。
• 你需要先把服务端的旧提交数据传递到客户端JS环境，再在JS循环时做选中状态判断。

1. 先在你的JS代码之前，通过Blade把旧的勾选ID数组转为JS可用的数组：

// 放在fetch逻辑之前，服务端渲染时会直接把old值转为JS数组
const oldCheckedQualities = @json(old('qualitiesProductCheckbox', []));

2. 修改原来的isChecked判断逻辑，改为客户端JS层面的判断，不要嵌套Blade指令：

// 原来的isChecked赋值行替换为下面的代码
var isChecked = oldCheckedQualities.includes(calidad.id.toString()) ? 'checked' : '';

// 先获取服务端的旧勾选数据
const oldCheckedQualities = @json(old('qualitiesProductCheckbox', []));

//Fetch again the qualities of the product after the validation.
var oldProduct= ( ('{{ old("product") }}' !='') ? '{{ old("product") }}' : '-1');
if(oldProduct!=-1){
    fetch("{{route('admin.searchQualitiesByProduct')}}",{
        method : 'POST',
        body: JSON.stringify({product : oldProduct}),
        headers:{
            'Content-Type': 'application/json',
            "X-CSRF-Token": csrfToken
        }
    }).then(response =>{
        return response.json()
    }).then( data =>{
        var checkboxes = "";           
        data.lista.forEach(function(calidad) {
            // 改用JS判断是否勾选
            var isChecked = oldCheckedQualities.includes(calidad.id.toString()) ? 'checked' : '';
            checkboxes +=  '<input type="checkbox" '+isChecked+' name="qualitiesProductCheckbox[]"  value="'+calidad.id+'">&nbsp;Calidad: <label>'+calidad.name+'</label><br>';  
       });
       document.getElementById("_calidades").innerHTML = checkboxes;
    }).catch(error =>console.error(error));
}

内容的提问来源于stack exchange，提问作者Freddy Daniel