Bootstrap多选selectpicker点击编辑按钮无法启用该如何解决

问题原因 #

Bootstrap Select Picker 组件初始化后会隐藏原生的<select>元素，自行渲染一套自定义DOM结构实现样式和交互效果。仅修改原生select的disabled属性只会更新原始DOM状态，不会同步到组件生成的交互UI上，因此会出现代码层面已经解除禁用但组件依然无法点击的情况。

解决方法 #

修改编辑按钮的点击事件逻辑，在更新完表单元素的禁用状态后，主动调用selectpicker的refresh方法同步状态即可，修改后的JS代码如下：

$(document).ready(function(){
    $("form input[type=text]").prop("disabled",true);
    $("input[name=edit]").on("click",function(){
        const $currentRow = $(this).closest("tr");
        $currentRow.find("input,select").prop("disabled",false);
        // 刷新selectpicker组件同步状态
        $currentRow.find(".selectpicker").selectpicker("refresh");
    })
})

你也可以直接使用selectpicker的内置方法修改禁用状态，不需要额外刷新：

// 直接通过组件方法解除禁用
$currentRow.find(".selectpicker").selectpicker("setDisabled", false);

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