- 在layui框架中,动态生成的表单元素(如checkbox)需要重新渲染才能显示为layui风格的组件。
在成功弹出层后,需要执行表单渲染,即使用 layui.form.render()。
注意:需要确保layui.form已经加载。
html
<button class="layui-btn layui-btn-sm popBtn">弹窗事件</button>
$('.popBtn').click(function () {
var html = '';
html += '<div id="faceResultCon" class="faceResultCon">';
html += '<form class="layui-form" action="">';
html += '<div class="layui-form-item">';
html += '<label class="layui-form-label">该候选人面试结果是:</label>';
html += '<div class="layui-input-block">';
html += '<input type="checkbox" name="face_checkbox" lay-filter="face_checkbox" title="通过面试" value="0" lay-skin="primary">';
html += '<input type="checkbox" name="face_checkbox" lay-filter="face_checkbox" title="不合适" value="1">'; // 添加了value值
html += '</div>';
html += '</div>';
html += '<div class="layui-form-item layui-form-text">';
html += '<label class="layui-form-label">面试评价:</label>';
html += '<div class="layui-input-block">';
html += '<textarea placeholder="输入面试评价(非必填)" class="layui-textarea"></textarea>';
html += '</div>';
html += '</div>';
html += '</form>';
html += '</div>';
layer.open({
type: 1,
title: '面试结果',
content: html,
area: ['500px', '280px'],
btn: ['确认', '关闭'],
btnAlign: 'c',
success: function(layero, index) {
// 关键:渲染表单元素
layui.form.render();
// 如果需要设置单选效果(二选一)
layui.form.on('checkbox(face_checkbox)', function(data){
// 当选择一个checkbox时,取消另一个的选择
var checkboxes = layero.find('input[name="face_checkbox"]');
checkboxes.each(function(){
if(this !== data.elem){
$(this).prop('checked', false);
}
});
layui.form.render('checkbox');
});
},
yes: function(index, layero){
// 确认按钮回调
var form = layero.find('form');
var checkedValue = form.find('input[name="face_checkbox"]:checked').val();
var textareaValue = form.find('textarea').val();
console.log('面试结果:', checkedValue);
console.log('面试评价:', textareaValue);
layer.close(index);
},
btn2: function(index, layero){
// 关闭按钮回调
layer.close(index);
}
});
});