当status字段值为Paid时如何将fines输入框设置为只读？

现有代码问题说明 #

你当前的代码存在两处问题导致效果不生效：

• 缺少初始化判断逻辑：仅绑定了status字段的change事件，页面首次加载时即使status默认值为Paid，也不会自动触发联动将fines设为只读
• status输入框自带readonly属性：如果你希望用户可以手动修改status值触发联动，需要先移除status输入标签上的readonly属性；如果status值是通过其他JS逻辑动态修改的，需要在修改值后手动触发change事件

修正后代码 #

将你的JavaScript代码替换为以下内容即可：

$(document).ready(function(){
    // 封装fines只读状态切换逻辑
    function syncFinesStatus() {
        const currentStatus = $('input[name=status]').val().trim();
        // 当status为Paid时fines设为只读，否则可编辑
        $("#fines").prop("readonly", currentStatus === "Paid");
        // 可选补充：如果需要同时取消Paid状态下fines的必填校验，可以放开下面这行
        // $("#fines").prop("required", currentStatus !== "Paid");
    }

    // 绑定status值变更时的联动逻辑
    $('input[type=text][name=status]').change(syncFinesStatus);
    // 页面加载完成后先执行一次状态同步
    syncFinesStatus();
});

其他适配说明 #

• 如果需要忽略status值的大小写匹配（比如允许paid/PAID都触发只读），可以把判断条件改为currentStatus.toLowerCase() === "paid"
• 如果status输入框需要保持只读、仅通过其他JS逻辑修改值，每次修改完status的值后手动触发一次change事件即可生效：

// 示例：其他逻辑中修改status值后触发联动
$('#status').val('Paid').trigger('change');

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