Search code examples
jqueryasp.nettextboxreadonlyinput-field

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


I have 3 input textfields, but whenever the first one is filled in, the other 2 inputfields should be disabled. I'm trying to do this as shown below and disabling the 2 input fields is working fine, but when I delete my input they stay disabled and they don't get their readonly= false. Any ideas for a solution? Working with Jquery in ASP.net!

FRONTEND:

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

Solution

  • Fixed it!

    I worked with keyup instead of onchange AND length > 0 instead of != ''

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