使用Javascript翻转文本框的只读标志

Question

我有一个带有几个单选按钮的框架，用户应该选择他的职业所属的“类别”，然后无条件地指定他的职业。

如果用户选择“已退役”，则要求在“指定职业”文本框中预填“已退役”并禁用它以防止其被更改。 “指定占用”文本框也应该不再是制表位。如果用户选择了“退役”以外的单选按钮，则应再次启用“指定占用”文本框，并且“指定占用”文本框应再次处于正常的选项卡序列中。

最初，我在“指定职业”文本框中设置并清除了已禁用的属性，然后我发现，在提交表单时，已禁用的字段从提交中排除，并且“指定职业”文本框中的“必需”验证程序正在被引发，因为文本框被删除了。

解决此问题的最佳方法是什么？我的方法是通过设置/重置文本框上的readonly属性并更改背景颜色以使其显示为禁用来模拟禁用的文本框。 （我想我应该改变前景色而不是背景色）。尽管如此，我的代码使文本框只读并重置它似乎不起作用。

    function OccupationOnClick(sender) {

        debugger;
        var optOccupationRetired = document.getElementById("<%= optOccupationRetired.ClientId %>");
        var txtSpecifyOccupation = document.getElementById("<%= txtSpecifyOccupation.ClientId %>");
        var optOccupationOther = document.getElementById("<%= optOccupationOther.ClientId %>");

    if (sender == optOccupationRetired) {

        txtSpecifyOccupation.value = "Retired"
        txtSpecifyOccupation.readonly = "readonly";
        txtSpecifyOccupation.style.backgroundColor = "#E0E0E0";
        txtSpecifyOccupation.tabIndex = -1;
    }
    else {
        if (txtSpecifyOccupation.value == "Retired")
            txtSpecifyOccupation.value = "";
        txtSpecifyOccupation.style.backgroundColor = "#FFFFFF";
        txtSpecifyOccupation.readonly = "";
        txtSpecifyOccupation.tabIndex = 0;
    }
}

有人可以向我提出处理此方案的最佳方法的建议，并提供上述代码的修改以修复readonly属性的设置/重置吗？

Answer 1

我会使用jQuery代替它，它非常容易实现......

将文本框设置为只读...

$("#myTxtID").attr('readonly', 'readonly');

将文本框设置为非只读

$("#myTxtID").removeAttr('readonly');

Answer 2

我最近不得不做同样的事情。这是我解决它的方式。

1. 返回使用disabled属性而不是readonly。

2. 将RequiredFieldValidator替换为CustomValidator。在客户端和服务器验证功能中，确定是否需要根据“已退休”单选按钮的条件检查文本输入。然后在需要时检查文本框中的输入。 （在js方面，您可以检查文本框本身的disabled属性，以便为自己节省一步。）

3. 在服务器端，您应该仔细检查单选按钮选择，如果选择“已退休”，则应确保“占用”值实际上为“已退役”。这可以解决你没有从禁用字段中获取值的问题，无论如何你都应该这样做（永远不要相信用户和所有这些）。