如何启用经jQuery UI初始化的禁用状态checkboxradio？

问题出在直接操作原生属性后未同步更新jQuery UI组件状态，或调用组件方法的方式需要配合状态刷新。以下是两种可行的修改方案：

方案一：使用jQuery UI组件的enable方法 #

直接调用checkboxradio组件提供的enable方法，这是官方推荐的组件状态操作方式：

$("#enablebutton").click(function(){
    $("#openchest").checkboxradio("enable");
});

方案二：修改原生属性后刷新组件状态 #

若需先修改原生input的disabled属性，必须调用refresh方法让组件同步更新UI状态：

$("#enablebutton").click(function(){
    $("#openchest").prop("disabled", false).checkboxradio("refresh");
});

注意：你的代码缺少jQuery UI的主题CSS文件，这会导致美化后的组件样式异常，建议引入对应版本的jQuery UI主题CSS，否则禁用/启用状态无法通过视觉直观体现。

完整可运行代码示例：

<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<!-- 请引入对应版本的jQuery UI主题CSS文件 -->
<script>
$(document).ready(function(){
    $("#openchest").checkboxradio();
    $("#enablebutton").click(function(){
        // 二选一即可
        $("#openchest").checkboxradio("enable");
        // 或者 $("#openchest").prop("disabled", false).checkboxradio("refresh");
    });
});
</script>
<button id="enablebutton">enable checkbox</button>
<label for="openchest">Open Chest</label><input type="checkbox" id="openchest" disabled="disabled" value="1" />

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