title: Change table row color depending on multiple selections/hide elements
body: <p>I have a table. On each row I have a checkbox to "select it", two select boxes and an extra checkbox.</p>
  
  <p>When I show my page, each row background color is the default one (white).</p>
  
  <p>What I need is two things:</p>
  
  <ol>
  <li><p>For each "Action" select box value, I want the row to change its color but only if the row checkbox is checked - Green for 'create' and Red for 'delete'</p></li>
  <li><p>If the "Action" select box value is equal 'delete', I want the second select box and the extra checkbox to be disabled.</p></li>
  </ol>
  
  <p>At the moment, I have the following code that changes the row background color depending only on the first select box choice, not taking into account the state of the checkbox.</p>
  
  <p>How can I implement this? I don't know how to make these conditions work together.</p>
  
  <p>Thanks.</p>
  
  <p>NOTE: I'm using this code in Drupal but it's generic.
  SECOND NOTE: This is used in drupal so I'm using a theme that has already css for the table. When I hover for example and for odd/even rows, some colors are already being applied. Don't know if this has impact on the code to implement what I need.</p>
  
  <p><a href="https://i.stack.imgur.com/Oljby.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Oljby.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table class="containers_table sticky-enabled table-select-processed tableheader-processed sticky-table"&gt;
   &lt;thead&gt;&lt;tr&gt;&lt;th class="select-all"&gt;&lt;input type="checkbox" class="form-checkbox" title="Select all rows in this table"&gt;&lt;/th&gt;&lt;th&gt;Container&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt;&lt;th&gt;Configuration&lt;/th&gt;&lt;th&gt;scripts&lt;/th&gt; &lt;/tr&gt;&lt;/thead&gt;
  &lt;tbody&gt;
   &lt;tr class="odd"&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;&lt;div class="form-item form-type-checkbox form-item-containers-table-VT-1"&gt;
    &lt;input class="containers_table form-checkbox" type="checkbox" id="edit-containers-table-vt-1" name="containers_table[VT_1]" value="VT_1"&gt;
  &lt;/div&gt;
  &lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;container 1&lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;a&lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;b&lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;c&lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;&lt;div class="form-item form-type-select form-item-action-VT-1"&gt;
    &lt;label class="element-invisible"&gt;Action for VT_1 &lt;/label&gt;
   &lt;select class="update-action form-select chosen-processed" name="action[VT_1]" style="display: none;"&gt;&lt;option value="create"&gt;create&lt;/option&gt;&lt;option value="delete"&gt;delete&lt;/option&gt;&lt;/select&gt;&lt;div class="chosen-container chosen-container-single update-action form-select chosen-processed" title="" style="width: 300px;"&gt;&lt;a class="chosen-single"&gt;
    &lt;span&gt;create&lt;/span&gt;
    &lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;
  &lt;/a&gt;
  &lt;div class="chosen-drop"&gt;
    &lt;div class="chosen-search"&gt;
      &lt;input class="chosen-search-input" type="text" autocomplete="off"&gt;
    &lt;/div&gt;
    &lt;ul class="chosen-results"&gt;&lt;/ul&gt;
  &lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;&lt;div class="form-item form-type-select form-item-card-configuration-VT-1"&gt;
    &lt;label class="element-invisible"&gt;Card configuration for VT_1 &lt;/label&gt;
   &lt;select class="update-card_configuration form-select chosen-processed" name="card_configuration[VT_1]" style="display: none;"&gt;&lt;option value="default"&gt;default&lt;/option&gt;&lt;option value="HalSim_VT_1_OCC2"&gt;HalSim_VT_1_OCC2&lt;/option&gt;&lt;option value="HalSim_VT_2_OCC2"&gt;HalSim_VT_2_OCC2&lt;/option&gt;&lt;option value="HalSim_VT_3_OCC2"&gt;HalSim_VT_3_OCC2&lt;/option&gt;&lt;/select&gt;&lt;div class="chosen-container chosen-container-single update-card_configuration form-select chosen-processed" title="" style="width: 300px;"&gt;&lt;a class="chosen-single"&gt;
    &lt;span&gt;default&lt;/span&gt;
    &lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;
  &lt;/a&gt;
  &lt;div class="chosen-drop"&gt;
    &lt;div class="chosen-search"&gt;
      &lt;input class="chosen-search-input" type="text" autocomplete="off"&gt;
    &lt;/div&gt;
    &lt;ul class="chosen-results"&gt;&lt;/ul&gt;
  &lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;&lt;div class="form-item form-type-checkbox form-item-ne-configuration-VT-1"&gt;
    &lt;label class="element-invisible"&gt;NE configuration for VT_1 &lt;/label&gt;
   &lt;input class="update-ne_configuration form-checkbox" type="checkbox" name="ne_configuration[VT_1]" value="1"&gt;
  &lt;/div&gt;
  &lt;/td&gt; &lt;/tr&gt;
   &lt;tr class="even"&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;&lt;div class="form-item form-type-checkbox form-item-containers-table-VT-2"&gt;
    &lt;input class="containers_table form-checkbox" type="checkbox" id="edit-containers-table-vt-2" name="containers_table[VT_2]" value="VT_2"&gt;
  &lt;/div&gt;
  &lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;container 2&lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;d&lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;e&lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;f&lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;&lt;div class="form-item form-type-select form-item-action-VT-2"&gt;
    &lt;label class="element-invisible"&gt;Action for VT_2 &lt;/label&gt;
   &lt;select class="update-action form-select chosen-processed" name="action[VT_2]" style="display: none;"&gt;&lt;option value="create"&gt;create&lt;/option&gt;&lt;option value="delete"&gt;delete&lt;/option&gt;&lt;/select&gt;&lt;div class="chosen-container chosen-container-single update-action form-select chosen-processed" title="" style="width: 300px;"&gt;&lt;a class="chosen-single"&gt;
    &lt;span&gt;create&lt;/span&gt;
    &lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;
  &lt;/a&gt;
  &lt;div class="chosen-drop"&gt;
    &lt;div class="chosen-search"&gt;
      &lt;input class="chosen-search-input" type="text" autocomplete="off"&gt;
    &lt;/div&gt;
    &lt;ul class="chosen-results"&gt;&lt;/ul&gt;
  &lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;&lt;div class="form-item form-type-select form-item-card-configuration-VT-2"&gt;
    &lt;label class="element-invisible"&gt;Card configuration for VT_2 &lt;/label&gt;
   &lt;select class="update-card_configuration form-select chosen-processed" name="card_configuration[VT_2]" style="display: none;"&gt;&lt;option value="default"&gt;default&lt;/option&gt;&lt;option value="HalSim_VT_1_OCC2"&gt;HalSim_VT_1_OCC2&lt;/option&gt;&lt;option value="HalSim_VT_2_OCC2"&gt;HalSim_VT_2_OCC2&lt;/option&gt;&lt;option value="HalSim_VT_3_OCC2"&gt;HalSim_VT_3_OCC2&lt;/option&gt;&lt;/select&gt;&lt;div class="chosen-container chosen-container-single update-card_configuration form-select chosen-processed" title="" style="width: 300px;"&gt;&lt;a class="chosen-single"&gt;
    &lt;span&gt;default&lt;/span&gt;
    &lt;div&gt;&lt;b&gt;&lt;/b&gt;&lt;/div&gt;
  &lt;/a&gt;
  &lt;div class="chosen-drop"&gt;
    &lt;div class="chosen-search"&gt;
      &lt;input class="chosen-search-input" type="text" autocomplete="off"&gt;
    &lt;/div&gt;
    &lt;ul class="chosen-results"&gt;&lt;/ul&gt;
  &lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/td&gt;&lt;td style="background-color: rgb(215, 234, 217);"&gt;&lt;div class="form-item form-type-checkbox form-item-ne-configuration-VT-2"&gt;
    &lt;label class="element-invisible"&gt;NE configuration for VT_2 &lt;/label&gt;
   &lt;input class="update-ne_configuration form-checkbox" type="checkbox" name="ne_configuration[VT_2]" value="1"&gt;
  &lt;/div&gt;
  &lt;/td&gt; &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>JQUERY:</strong></p>
  
  <pre><code>(function($) {
      Drupal.behaviors.mymoduleColorRows = {
          attach: function(context) {
  
              // Bind change event to select
              $('.update-action').change(function(){
                  setColors();
              });
  
              $('.edit-containers-table-groove-vt-1').change(function(){
                  setColors2();
              });
  
              // Call function on first page load
              setColors();
  
              function setColors() {
                  // Loop rows
                  $('.containers_table tr').each(function(){
                      // Get color from value of select
                      var color = $(this).find('.update-action').val() == 'create' ? '#D7EAD9' : '#F5BE8B';
                      // Set color
                      $(this).find('td').css({'background-color': color});
  
                  });
              }
  
              function setColors2() {
                  // Loop rows
                  $('.containers_table tr').each(function(){
                      // Get color from value of select
                      var color = '#F5BE8B';
                      // Set color
                      $(this).find('td').css({'background-color': color});
  
                  });
              }
          }
      };
  
  })(jQuery);
  </code></pre>