title: disable all rows except first row and enable each row when the above row is filled with data
body: <p>I have a html table with 4 rows , i want to only enable the first row and disable all the other 3 rows and <strong>enable second row</strong> when user enter all the details in the <strong>first row</strong> (enter Order ID,select Product1, enter description and select Product2 from dropdown list).
  Similarly <strong>enable third row</strong> when user enter all the details in the <strong>second row</strong>..
  I tried to use <code>disabled="disabled"</code> in the <code>&lt;tr&gt;</code> to disable last 3 rows but it is not working as expected.</p>
  
  <p>Another validation check is when user enter the value in the Description column for each row, then only it should check the values user has selected in 
  columns Product1 and Product2, show the error message(Product1 and Product2 values cannot be same) if value selected in Product1 and Product2 dropdown list are same.</p>
  
  <p>Demo : <a href="http://plnkr.co/edit/7s3QQXrrmaH3nUXQ0td5?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/7s3QQXrrmaH3nUXQ0td5?p=preview</a></p>
  
  <p>html code:</p>
  
  <pre><code>&lt;table id="productTable" border="1"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Order ID&lt;/th&gt;
          &lt;th&gt;Product1&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
          &lt;th&gt;Product2&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="text" name="orderNum" value=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;select class="product1" &gt;
                  &lt;option value=""&gt;&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" name="description" value=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select class="product2" &gt;
                  &lt;option value=""&gt;&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr disabled="disabled"&gt;
          &lt;td&gt;&lt;input type="text" name="orderNum" value=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;select class="product1" &gt;
                  &lt;option value=""&gt;&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" name="description" value=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select class="product2" &gt;
                  &lt;option value=""&gt;&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr disabled="disabled"&gt;
          &lt;td&gt;&lt;input type="text" name="orderNum" value=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;select class="product1" &gt;
                  &lt;option value=""&gt;&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" name="description" value=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select class="product2" &gt;
                  &lt;option value=""&gt;&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr disabled="disabled"&gt;
          &lt;td&gt;&lt;input type="text" name="orderNum" value=""&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;select class="product1" &gt;
                  &lt;option value=""&gt;&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" name="description" value=""&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select class="product2" &gt;
                  &lt;option value=""&gt;&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt; &lt;br&gt;
  &lt;button name="submit" id="dataButton" onClick="getData()" disabled&gt;Get Data&lt;/button&gt;
  </code></pre>
  
  <p>js code:</p>
  
  <pre><code> function populateSelect() {
       var ids = [{"pid":"laptop","des":"laptop"},{"pid":"Mobile","des":"Mobile"},{"pid":"IPAD mini.","des":"IPAD mini."}]
        var productDropdown1 = $(".product1"); 
        var productDropdown2 = $(".product2");
        $.each(ids, function(index,value) {
        $("&lt;option /&gt;").text(value.des).val(value.pid).appendTo(productDropdown1);
          $("&lt;option /&gt;").text(value.des).val(value.pid).appendTo(productDropdown2);
        });
  
         $("select").change(function() 
         {   
         var row = $(this).closest("tr");
         var product1_drop = $('.product1',row).val();
         var product2_drop = $('.product2',row).val();
         if(product1_drop == product2_drop ){       
              alert('Product1 and Product2 cannot have same value');
        }
     });
   }
  </code></pre>
  
  <p>With the above js code, it is checking the validation when user has selected the value from the dropdown list, but i want when user enter the text in the text box then check if two dropdown list(Product1 and Product2) has the same value and show the error message near that row instead of the pop up dialog box.</p>