ASP.NET中jQuery输入框联动禁用失效问题求助

看起来你遇到的问题是当清空第一个输入框内容后，另外两个输入框没有恢复可编辑状态。这通常是因为你的事件处理逻辑只覆盖了"输入内容"的场景，却没处理"内容被清空"的反向情况。下面是具体的修复方案：

核心思路 #

我们需要监听第一个输入框的所有内容变化事件（包括输入、删除、粘贴等），然后根据它是否有内容来动态切换另外两个输入框的readonly状态：

• 当第一个输入框有内容时，禁用另外两个
• 当第一个输入框内容为空时，恢复另外两个的可编辑状态

完整jQuery代码实现 #

$(document).ready(function() {
    // 定义复用的状态切换函数
    function toggleOtherTextBoxes() {
        // 获取第一个输入框的内容（去除首尾空白字符）
        var hasContent = $.trim($('#<%= txtTitle.ClientID %>').val()) !== '';
        
        // 替换成你另外两个输入框的实际ClientID
        $('#<%= txtBox1.ClientID %>').prop('readonly', hasContent);
        $('#<%= txtBox2.ClientID %>').prop('readonly', hasContent);
    }

    // 页面加载时先执行一次，确保初始状态正确
    toggleOtherTextBoxes();

    // 监听第一个输入框的所有内容变化事件
    $('#<%= txtTitle.ClientID %>').on('input', function() {
        toggleOtherTextBoxes();
    });
});

关键细节说明 #

1. 使用ClientID获取正确的前端ID：在ASP.NET中，服务器控件的前端ID可能会因为命名容器（比如MasterPage、GridView）而被修改，所以必须用<%= txtTitle.ClientID %>来获取实际渲染到页面的ID。
2. 用prop()而非attr()设置readonly：readonly是DOM元素的布尔属性，使用prop()能正确切换其布尔状态，而attr()只能添加/移除属性，在反向切换时可能失效。
3. 监听input事件：这个事件能捕获所有内容变化场景（键盘输入、鼠标粘贴、删除等），比keyup或change事件更全面。
4. 页面加载时初始化状态：确保页面刚加载时，如果第一个输入框已有内容，另外两个输入框会被正确禁用。

如果你不知道另外两个输入框的ID #

如果另外两个输入框有统一的CSS类，也可以用类选择器来批量操作，比如：

$('.other-textbox').prop('readonly', hasContent);

内容的提问来源于stack exchange，提问作者Manuel van den Notelaer