title: Enabling / Disabling Specific Row Values
body: <p>I've created a form that is being populated from a database.</p>
  
  <p>The results appear on screen and by default I disable all the form fields except the initial dropdown list on each row.</p>
  
  <p>Changing the value of the dropdown list should enable or disable the form fields on that specific row. This works for the first row only, but not the subsequent rows.</p>
  
  <p>I think this is because I'm only referencing the first row, but I'm to sure how to change this..</p>
  
  <p>This what I've got so far.. bare in mind this is only 2 rows, the live data could present lots of rows.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;script src="jquery-1.8.0.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        $(document).ready(function() {
          $('#option').change(function(){
            if($(this).val()=="2"){
              $("#name").removeAttr("disabled");
              $("#id").removeAttr("disabled");
              $("#home").removeAttr("disabled");
              $("#active").removeAttr("disabled");
            }
  
            if($(this).val()!="2"){
              $("#name").attr("disabled", "disabled");
              $("#id").attr("disabled", "disabled");
              $("#home").attr("disabled", "disabled");
              $("#active").attr("disabled", "disabled");
            }
          });
        });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id='usr' method='post' action='test.php'&gt;
          &lt;table border='1' width='60%'&gt;
              &lt;tr&gt;
                  &lt;th&gt;Val1&lt;/th&gt;
                  &lt;th&gt;Val2&lt;/th&gt;
                  &lt;th&gt;Val3&lt;/th&gt;
                  &lt;th&gt;Val4&lt;/th&gt;
                  &lt;th&gt;Val5&lt;/th&gt;
                  &lt;th&gt;Val6&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr align='center'&gt;
                  &lt;td&gt;
                      &lt;select name='option' id='option' /&gt;
                          &lt;option&gt;&lt;/option&gt;
                          &lt;option value='1'&gt;Option1&lt;/option&gt;
                          &lt;option value='2'&gt;Option2&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td&gt;USR1&lt;/td&gt;
                  &lt;td&gt;&lt;input type='text' name='name[]' id='name' value='' disabled='disabled'/&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type='text' name='id[]' id='id' value='' disabled='disabled'/&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name='home[]' id='home' disabled='disabled'/&gt;
                          &lt;option value='North'&gt;North&lt;/option&gt;
                          &lt;option value='South'&gt;South&lt;/option&gt;
                          &lt;option value='Other'&gt;Other&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name='active[]' id='active' disabled='disabled'/&gt;
                          &lt;option value=''&gt;&lt;/option&gt;
                          &lt;option value='1'&gt;Yes&lt;/option&gt;
                          &lt;option value='2'&gt;No&lt;/option&gt;
                          &lt;option value='3'&gt;Dead&lt;/option&gt;
                          &lt;option value='4'&gt;Other&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr align='center'&gt;
                  &lt;td&gt;
                      &lt;select name='option' id='option' /&gt;
                          &lt;option&gt;&lt;/option&gt;
                          &lt;option value='1'&gt;Option1&lt;/option&gt;
                          &lt;option value='2'&gt;Option2&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td&gt;USR2&lt;/td&gt;
                  &lt;td&gt;&lt;input type='text' name='name[]' id='name' value='' disabled='disabled'/&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type='text' name='id[]' id='id' value='' disabled='disabled'/&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name='home[]' id='home' disabled='disabled'/&gt;
                          &lt;option value='North'&gt;North&lt;/option&gt;
                          &lt;option value='South'&gt;South&lt;/option&gt;
                          &lt;option value='Other'&gt;Other&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name='active[]' id='active' disabled='disabled'/&gt;
                          &lt;option value=''&gt;&lt;/option&gt;
                          &lt;option value='1' &gt;Yes&lt;/option&gt;
                          &lt;option value='2' &gt;No&lt;/option&gt;
                          &lt;option value='3' &gt;Dead&lt;/option&gt;
                          &lt;option value='4'&gt;Other&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can some one help me to get this to work for all rows. When selecting the dropdown at the beginning of a row it should affect that row only.</p>