title: JQM selectors collapsible fieldset
body: <p>I am using <code>Jquery mobile</code> for a form/input fieldset. I need to be able to check if fields in a fieldset are complete/have a value. </p>
  
  <p>When the collapsible gets closed I need to detect if one of all the fields have a value if they don't it should add a class to the collapsible link.</p>
  
  <p>I cannot use the <code>ID</code> for the selector as this will go across different sections with various amounts of fieldsets.</p>
  
  <p>My question is am I using the selectors wrong and how can i fix it?</p>
  
  <p><strong><em>CODE:</em></strong></p>
  
  <p><strong>JQUERY:</strong></p>
  
  <pre><code>$('a.ui-icon-minus').on('click',function(){
              if($('fieldset:not(.ui-collapsible-collapsed) input[type="radio"]').is(':checked') || $('fieldset:not(.ui-collapsible-collapsed) textarea').val()){
                  if($('fieldset:not(.ui-collapsible-collapsed) input[type="radio"]').is(':checked') &amp;&amp; $('fieldset:not(.ui-collapsible-collapsed) textarea').val()){
                          $('div.ui-collapsible-heading a').addClass("complete");
                          $('div.ui-collapsible-heading a').removeClass("half-complete");
                          $('div.ui-collapsible-heading a').removeClass("incomplete");
                          alert("complete");
                  } else {
                      $('div.ui-collapsible-heading a').addClass("half-complete");
                      $('div.ui-collapsible-heading a').removeClass("incomplete");
                      alert("half-complete");
                  }
              } else {
                  $('div.ui-collapsible-heading a').addClass("incomplete");
                  alert("incomplete");
              }
          });
  </code></pre>
  
  <p><strong>HTML FIELDSET:</strong></p>
  
  <pre><code>&lt;fieldset data-collapsed="false" data-iconpos="right" data-role="collapsible" id="bc1"&gt;
      &lt;div class="ui-collapsible-heading ui-collapsible-heading-collapsed" role="heading"&gt;
          &lt;a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-plus"href="#"&gt;BC1 &lt;span class="ui-collapsible-heading-status"&gt;click to expand contents&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div aria-hidden="true" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed"&gt;
      &lt;legend&gt;BC1&lt;/legend&gt;
          &lt;p&gt;All bank accounts are opened in line with Group Treasury approval.&lt;/p&gt;
          &lt;div class="ui-field-contain"&gt;
              &lt;label&gt;Control in Place?&lt;/label&gt;
              &lt;div data-role="controlgroup" data-type="horizontal"&gt;
                  &lt;input id="bc1-ry" name="bc1" type="radio" value="Y"&gt;
                  &lt;label for="bc1-ry"&gt;Yes&lt;/label&gt; &lt;input id="bc1-rn" name="bc1" type="radio" value="N"&gt;
                  &lt;label for="bc1-rn"&gt;No&lt;/label&gt;
              &lt;/div&gt;
              &lt;label for="bc1-v"&gt;Verification&lt;/label&gt; 
              &lt;textarea id="bc1-v" name="bc1-v"&gt;&lt;/textarea&gt;
              &lt;label for="bc1-c"&gt;Comments&lt;/label&gt; 
              &lt;textarea id="bc1-c" name="bc1-c"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>