title: How to change value of a class attribute
body: <p>Depending on the text, I am trying to change the value of a span's class</p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('click', '#deactivebtn', function (event) {
      var $checked = $('#customer_details_table').find(":radio:checked");
      var id = $checked[0].id;
      var val = $("#" + id).closest('tr').find('span').text();
      if (val == 'Active') {
          $("#" + id).closest('tr').find('span').attr('class') = 'label label-success';
      }
     else if (val == 'DeActive') {
          $("#" + id).closest('tr').find('span').attr('class') = 'label label-inverse';
      }
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="table table-striped table-bordered table-hover dataTable" id="customer_details_table" aria-describedby="sample_1_info" style="display: table;"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;Customer Name&lt;/th&gt;
              &lt;th&gt;Address&lt;/th&gt;
              &lt;th&gt;Contact No.&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="odd gradeX"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;label class="radio"&gt;
                      &lt;input type="radio" class="bradio" id="20" name="optionsRadios1" value="option1"&gt;
                  &lt;/label&gt;
              &lt;/td&gt;
              &lt;td width="20%"&gt;kiran&lt;/td&gt;
              &lt;td width="25%"&gt;XXXXXXX&lt;/td&gt;
              &lt;td width="20%"&gt;7654321987&lt;/td&gt;
              &lt;td width="20%"&gt;venkatrajkiran@yahoo.com&lt;/td&gt;
              &lt;td width="10%" align="center"&gt;&lt;span class="label label-inverse"&gt;Active&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;label class="radio"&gt;
                      &lt;input type="radio" class="bradio" id="28" name="optionsRadios1" value="option1"&gt;
                  &lt;/label&gt;
              &lt;/td&gt;
              &lt;td width="20%"&gt;kiran&lt;/td&gt;
              &lt;td width="25%"&gt;XXXXXXX&lt;/td&gt;
              &lt;td width="20%"&gt;9701429843&lt;/td&gt;
              &lt;td width="20%"&gt;s@g.com&lt;/td&gt;
              &lt;td width="10%" align="center"&gt;&lt;span class="label label-inverse"&gt;DeActive&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button type="button" id="deactivebtn" class="btn blue" style="display: inline-block;"&gt;Click&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/mjvoavrc/4/" rel="nofollow">http://jsfiddle.net/mjvoavrc/4/</a></p>