title: C# MVC Deactivate (Disable) table row on click
body: <p>I have a table whose values are looped in and a button in each row that I am attempting to use to deactivate that row if clicked:</p>
  
  <pre><code>        &lt;table id="categoryList" class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Category ID&lt;/th&gt;
              &lt;th&gt;Category Name&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          @foreach (var item in Model.Categories)
          {
              &lt;tr&gt;
                  &lt;td&gt;@item.id&lt;/td&gt;
                  &lt;td&gt;@item.name&lt;/td&gt;
                  &lt;td&gt;&lt;button class="btn btn-default pull-left" id="btn-deactivate"&gt;Deactivate&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The rows are clickable at this point due to this javascript:</p>
  
  <pre><code>$("#categoryList &gt; tbody &gt; tr").click(function (event) {
  
      $("#categoryModal #categoryId").val($(event.target).parent().children()[0].innerText);
      $("#categoryModal #categoryName").val($(event.target).parent().children()[1].innerText);
  
      $("#categoryModal .deleteButton").attr("href", $("#colDelUrl").val() + "?categoryId=" + $(event.target).parent().children()[0].innerText);
      $("#categoryModal .deleteButton").show();
  
      $("#categoryModal").modal({ show: true, backdrop: true });
  });
  </code></pre>
  
  <p>The goal is to have the button deactivate (disable so it won't be clickable) the selected row when clicked and then reactivate the row on the second click.</p>