JQuery监听select选中值控制按钮禁用，添加默认选项后失效如何优化

原代码存在的问题 #

• 你新增的默认选项<option>Seleccionar Turno</option>没有显式设置value属性，默认取值为空字符串，本身逻辑上属于不等于3的情况，触发问题的核心是原有JS的属性操作逻辑错误
• 用attr()操作disabled这类布尔属性不符合jQuery最佳实践，且原生HTML不存在enabled属性，原代码中设置enabled完全不会生效
• 初始化和change事件中的判断逻辑重复，可复用性差

优化步骤 #

1. 修改下拉框默认选项配置

给默认提示选项显式设置空value，避免取值异常：

<select class="form-control" name="turnoID" id="turnoID">
    <option value="">Seleccionar Turno</option>
    <?php
    while ($row = mysqli_fetch_array($resb)) {
        echo "<option value='".$row['id']."'>".$row['desc_turno']."</option>";
    }
    ?>
</select>

2. 优化JS逻辑

替换原有JS代码为以下版本：

$(document).ready(function(){
    // 抽离公共的按钮状态更新方法
    function updateCierreBtn() {
        // 选中值等于3时禁用属性为false（启用按钮），否则为true（禁用按钮）
        $("#cierrecaja").prop('disabled', $("#turnoID").val() !== "3");
    }

    // 页面加载完成先初始化一次按钮状态
    updateCierreBtn();
    // 下拉框值变化时触发状态更新
    $("#turnoID").change(updateCierreBtn);
});

优化说明 #

• 用prop()操作disabled布尔属性比attr()更稳定，直接设置disabled为true/false即可控制禁用/启用状态，不需要操作不存在的enabled属性
• 逻辑抽离后后续修改判断规则只需要调整公共方法即可，避免重复编码
• 默认提示选项显式设置空value后，默认状态会被判定为不等于3，按钮默认禁用，完全符合需求预期

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