title: Set readonly property to false for an HTML text input on clicking an anchor tag
body: <p>My HTML:</p>
  
  <pre><code>&lt;div class="profileForm"&gt;
      &lt;fieldset&gt;
      &lt;label&gt;Name&lt;input type="text" id="name" name="name" runat="server" readonly=""/&gt;&lt;/label&gt;
      &lt;label&gt;Email&lt;input type="email" id="email" name="email" runat="server" readonly=""/&gt;&lt;/label&gt;
      &lt;label&gt;Date Of Birth&lt;input type="date" id="dob" name="dob" runat="server" readonly=""/&gt;&lt;/label&gt;
      &lt;label&gt;Address&lt;input type="text" id="address" name="address" runat="server" readonly=""/&gt;&lt;/label&gt;
      &lt;label&gt;City&lt;input type="text" id="city" name="city" runat="server" readonly=""/&gt;&lt;/label&gt;
      &lt;label&gt;State&lt;input type="text" id="state" name="state" runat="server" readonly=""/&gt;&lt;/label&gt;
      &lt;label&gt;Country&lt;input type="text" id="country" name="country" runat="server" readonly=""/&gt;&lt;/label&gt;
      &lt;label&gt;Access Level&lt;input type="text" id="accessLevel" name="accessLevel" runat="server" readonly=""/&gt;&lt;/label&gt;
      &lt;/fieldset&gt;
  &lt;/div&gt;
  &lt;div class="profileEdit"&gt;
      &lt;fieldset&gt;
          &lt;label&gt;&lt;a href="#" id="Aname"&gt;edit&lt;/a&gt;&lt;/label&gt;
          &lt;label&gt;&lt;a href="#" id="Aemail"&gt;edit&lt;/a&gt;&lt;/label&gt;
          &lt;label&gt;&lt;a href="#" id="Adob"&gt;edit&lt;/a&gt;&lt;/label&gt;
          &lt;label&gt;&lt;a href="#" id="Aaddress"&gt;edit&lt;/a&gt;&lt;/label&gt;
          &lt;label&gt;&lt;a href="#" id="Acity"&gt;edit&lt;/a&gt;&lt;/label&gt;
          &lt;label&gt;&lt;a href="#" id="Astate"&gt;edit&lt;/a&gt;&lt;/label&gt;
          &lt;label&gt;&lt;a href="#" id="Acountry"&gt;edit&lt;/a&gt;&lt;/label&gt;
      &lt;/fieldset&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My JavaScript</p>
  
  <pre><code>&lt;script src="Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          console.log("document ready")
          $("profileEdit label a").click(
          function (e) {
              if (this.attr("id") == "Aname") {
                  $("#name").attr("readonly", false);
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Alternate JavaScript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          console.log("document ready")
          $('#Aname').live('click', function () {
              $("#name").attr("readonly", false);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>What I am trying to do is set <code>readonly</code> attribute of the corresponding input text field to false on click of the corresponding anchor field. None of my JavaScript scripts works.</p>
  
  <p>Solution: after combining @KaraokeStu, @bipin answers
  I am using asp.net 4.5</p>
  
  <pre><code>$(document).ready(function () {
          console.log("document ready")
          $('.profileEdit label a').live('click', function () {
              alert("ctl00_ContentPlaceHolder1_" + this.id.substring(1, this.id.length));
              $("#" + "ctl00_ContentPlaceHolder1_" + this.id.substring(1, this.id.length)).prop('readonly', false);
              console.log($("#" + "ctl00_ContentPlaceHolder1_" + this.id.substring(1, this.id.length)).attr('readonly'))
              $("#" + "ctl00_ContentPlaceHolder1_" + this.id.substring(1, this.id.length)).focus();
              alert("done");
         });
  
      });
  </code></pre>