title: How to dynamically enable or disable the textbox by using jQuery in ASP.NET MVC?
body: <p>I have a ASP.NET MVC project with a large list of input textboxes which I want the user to control them independently. Here is the <a href="http://www.popevent.co.uk/test/" rel="nofollow noreferrer"><strong>link</strong></a>  how it looks like now. </p>
  
  <p>Here are some things I want to have: </p>
  
  <ol>
  <li><p>Each enable/disable link only controls each row. </p></li>
  <li><p>The number of rows is not fixed and it will be generated dynamically. It can be 10 or 20 rows.</p></li>
  </ol>
  
  <p><strong>What is a generic way to do this?</strong></p>
  
  <p>Here is my code sample:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      // first set
      $(document).ready(function() {
          $(".controller").toggle(
  
      function() {
          $('#target1').removeAttr("readonly");
          $('.controller').empty().append("Disable");
      },
  
      function() {
          $('#target1').attr("readonly", "readonly");
          $('.controller').empty().append("Enable");
      });
      });
  
  &lt;/script&gt;
  
  &lt;ul&gt;
      &lt;li&gt;text field:
          &lt;input type="text" readonly="readonly" id="target1" value="Change me" /&gt;
          &lt;a href="#" class="controller"&gt;Enable&lt;/a&gt;&lt;br /&gt;
      &lt;/li&gt;
      &lt;li&gt;text field:
          &lt;input type="text" readonly="readonly" id="target2" value="Change me" /&gt;
          &lt;a href="#" class="controller"&gt;Enable&lt;/a&gt;&lt;br /&gt;
      &lt;/li&gt;
      &lt;li&gt;text field:
          &lt;input type="text" readonly="readonly" id="target3" value="Change me" /&gt;
          &lt;a href="#" class="controller"&gt;Enable&lt;/a&gt;&lt;br /&gt;
      &lt;/li&gt;
      &lt;li&gt;text field:
          &lt;input type="text" readonly="readonly" id="target4" value="Change me" /&gt;
          &lt;a href="#" class="controller"&gt;Enable&lt;/a&gt;&lt;br /&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>