Bootstrap 5 个禁用+选中的开关被 JS FormData 忽略 class

Question

我有一个 Bootstrap 5 switch input，我想将其设置为强制性的（默认情况下已选中并且不是不可选中的）。文档说您可以组合属性 checked 和 disabled。但是，Javascript FormData class 似乎忽略了禁用的输入，无论它们是否被选中。有解决方法还是我不能使用 FormData？

Answer 1

如果您需要从表单中禁用的复选框中提交值，您可以使用 js 来实现..

尝试（示例代码）

$('form').submit(function(e) {
    $('#checkbox-id').each(function(e) {
        $(this).removeAttr('disabled');
    })
});

Answer 2

普通 Javascript 解决方案是手动填充 FormData 对象：

let form = e.target;
let data = new FormData(form); // Serialize all form elements that are not disabled

// Find all disabled Bootstrap switches ...
let switchInputs = form.querySelectorAll('.form-switch>input[type=checkbox]:disabled');

// ... and append them to the FormData object
switchInputs.forEach(function(input){
    if(input.checked) {
       data.append(input.name, input.value || 'on');   
    }
});

Bootstrap 5 个禁用+选中的开关被 JS FormData 忽略 class

Bootstrap 5 disabled+checked switch ignored by JS FormData class

javascript

form-data

bootstrap-5