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