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

Question

我有 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>

JQUERY:

$("#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);
        }
    });

Answer 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/

Answer 2

两件事：

也许您应该使用 'input' 让更改立即生效，而不是在当前文本框失去焦点之后生效，或者这就是您的目标。
使用 jQuery，使用 .val() 而不是 .value
! 不知道为什么。
只是为了性能，使用 $(this) 而不是 re-querying 和 $("#ctl00_ContentPlaceHolder1_txtTitle")

如您所见，我在代码段中包含了三个通用 input 以供使用，我希望其中包含要点

告诉我

$("#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"/>

Answer 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);
    }
});

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

Disabled all other inputfields when 1 inputfield is filled in doesn't work

asp.net

jquery

textbox

readonly

input-field