填写 1 个输入字段时禁用所有其他输入字段不起作用答案

【问题标题】：Disabled all other inputfields when 1 inputfield is filled in doesn't work填写 1 个输入字段时禁用所有其他输入字段不起作用
【发布时间】：2018-04-03 15:13:34
【问题描述】：

我有 3 个输入文本字段，但是当第一个被填写时，其他 2 个输入字段应该被禁用。我正在尝试按如下所示执行此操作，并且禁用 2 个输入字段工作正常，但是当我删除我的输入时，它们保持禁用状态并且它们不会得到它们的 readonly=false。任何解决方案的想法？在 ASP.net 中使用 Jquery！

前端：

<p><asp:TextBox ID="txtTitle" runat="server" CssClass="texter" placeholder="<%$ Resources:GlobalResource, title%>"  ></asp:TextBox></p>
<p><asp:TextBox ID="txtStatus" runat="server" CssClass="texter" placeholder="<%$ Resources:GlobalResource, status%>"  ></asp:TextBox></p>
<p><asp:TextBox ID="txtMessageId" runat="server" CssClass="texter" placeholder="<%$ Resources:GlobalResource, messageid%>" ></asp:TextBox></p>

查询：

$("#ctl00_ContentPlaceHolder1_txtTitle").change(function () {
        if (!$("#ctl00_ContentPlaceHolder1_txtTitle").value != ''){
            $("#ctl00_ContentPlaceHolder1_txtStatus").prop("readonly", true);
            $("#ctl00_ContentPlaceHolder1_txtMessageId").prop("readonly", true);
        }
        else {
            $("#ctl00_ContentPlaceHolder1_txtStatus").prop("readonly", false);
            $("#ctl00_ContentPlaceHolder1_txtMessageId").prop("readonly", false);
        }
    });

【问题讨论】：

$("#ctl00_ContentPlaceHolder1_txtTitle") 选择什么？那是渲染的html吗？
是的，因为。将它们设置为 readonly = true 可以正常工作。但是，如果我删除我的输入，那么其他输入仍然被禁用，它们应该可以再次编辑，但不知何故出错了。（也应该把它放在信息中，一分钟内完成）
我的问题是因为我没有在你的 html 中使用ctl00_ContentPlaceHolder1_txtTitle 作为 id 的任何东西，我没有使用过 asp.net 但它仍然很奇怪
使用 asp.net，如果您必须在服务器端获取一些东西（例如使用 jquery/javascript），那么它会将“ctl00_ContentPlaceHolder1_”添加到您的 id。所以这绝对没有错。我想应该更改 IF- 行但是。
那里，这就是为什么我问你这是否是 RENDERED html，而不是你编码的文件中的 html，而是你可以从浏览器源代码中复制的那个它已经被渲染了，当ctl00_ContentPlaceHolder1_txtTitle实际上已经存在于dom中时，这可能是有用的。

标签： jquery asp.net textbox readonly input-field

【解决方案1】：

我相信如果您使用 keyup 事件而不是 change 事件，它会起作用。例如，我将在下拉菜单中使用的更改。

$("#ctl00_ContentPlaceHolder1_txtTitle").keyup(function () {
    if ($(this).value != ''){
        $("#ctl00_ContentPlaceHolder1_txtStatus").prop("readonly", true);
        $("#ctl00_ContentPlaceHolder1_txtMessageId").prop("readonly", true);
    }
    else {
        $("#ctl00_ContentPlaceHolder1_txtStatus").prop("readonly", false);
        $("#ctl00_ContentPlaceHolder1_txtMessageId").prop("readonly", false);
    }
});

http://api.jquery.com/keyup/

【讨论】：

不，当输入字段再次为空时，readonly 仍然不会转换回 false。
好的，除了length > 0，你的答案和我的代码几乎一样

【解决方案2】：

几件事：

也许您应该使用'input'，以便更改立即生效，而不是在当前文本框失去焦点后生效，或者这就是您的目标。
使用 jQuery，使用 .val() 而不是 .value
! 不知道为什么。
仅出于性能考虑，使用$(this) 而不是使用$("#ctl00_ContentPlaceHolder1_txtTitle") 重新查询

如您所见，我在 sn-p 中包含了三个通用的 inputs，我希望要点在那里

告诉我

$("#ctl00_ContentPlaceHolder1_txtTitle").on('input', function () {
        if ($(this).val() != ''){
            $("#ctl00_ContentPlaceHolder1_txtStatus").prop("readonly", true);
            $("#ctl00_ContentPlaceHolder1_txtMessageId").prop("readonly", true);
        }
        else {
            $("#ctl00_ContentPlaceHolder1_txtStatus").prop("readonly", false);
            $("#ctl00_ContentPlaceHolder1_txtMessageId").prop("readonly", false);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ctl00_ContentPlaceHolder1_txtTitle"/>
<input id="ctl00_ContentPlaceHolder1_txtStatus"/>
<input id="ctl00_ContentPlaceHolder1_txtMessageId"/>

【讨论】：

还是和以前一样的问题。他们确实得到了'readonly = true'，但是当您删除输入框中的所有内容时，其他输入仍然是只读的，而它们应该可以再次编辑。（另一方面，我确实使用它，但是当某些东西不起作用时（比如这次），我总是分解到everuthing的本质，看看我的问题可能出在哪里）。
@ManuelvandenNotelaer，您好，我刚刚看到您的评论。 “但是当您删除输入框中的所有内容时，其他输入仍然是只读的” 不正确，至少在我包含的 sn-p 中不是。除非我误解了您的目标，即：make txtStatus and txtMessageId readonly if txtTitle is non-清空并使其可编辑。请告诉我我哪里弄错了

【解决方案3】：

修好了！

我使用 keyup 而不是 onchange AND length > 0 而不是 != ''

$("#ctl00_ContentPlaceHolder1_txtTitle").keyup(function () {
    if ($(this).val().length > 0 ) {
        $("#ctl00_ContentPlaceHolder1_txtStatus").prop("readonly", true);
        $("#ctl00_ContentPlaceHolder1_txtMessageId").prop("readonly", true);
    }
    else {
        $("#ctl00_ContentPlaceHolder1_txtStatus").prop("readonly", false);
        $("#ctl00_ContentPlaceHolder1_txtMessageId").prop("readonly", false);
    }
});

【讨论】：