title: Hide button based on value of custom attribute in select option when chnaged
body: <p>I have a dropdown selector, and a button I need to hide or show depending on the value of a custom attribute in the select options.</p>
  <p>HTML</p>
  <pre><code>&lt;div id=&quot;container-3&quot;&gt;
  &lt;div id=&quot;inside-container&quot;&gt;
  &lt;select id=&quot;pa_size&quot; class=&quot;&quot; name=&quot;attribute_pa_size&quot; data-attribute_name=&quot;attribute_pa_size&quot; data-show_option_none=&quot;yes&quot;&gt;
    &lt;option value=&quot;1kg&quot; selected=&quot;selected&quot; stock-status=&quot;true&quot; class=&quot;attached enabled&quot;&gt;1kg &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;- $75.90 &amp;nbsp;- (In Stock)&lt;/option&gt;
    &lt;option value=&quot;2kg&quot; stock-status=&quot;false&quot; class=&quot;attached enabled&quot;&gt;2kg - $119.90 &amp;nbsp;- (No Stock)&lt;/option&gt;
    &lt;option value=&quot;3kg&quot; stock-status=&quot;false&quot; class=&quot;attached enabled&quot;&gt;3kg - $174.90 &amp;nbsp;- (No Stock)&lt;/option&gt;
    &lt;option value=&quot;5kg&quot; stock-status=&quot;false&quot; class=&quot;attached enabled&quot;&gt;5kg - $262.90 &amp;nbsp;- (No Stock)&lt;/option&gt;
    &lt;option value=&quot;10kg&quot; stock-status=&quot;false&quot; class=&quot;attached enabled&quot;&gt;10kg - $482.90 &amp;nbsp;- (No Stock)&lt;/option&gt;
    &lt;option value=&quot;20kg&quot; stock-status=&quot;false&quot; class=&quot;attached enabled&quot;&gt;20kg - $823.90 &amp;nbsp;- (No Stock)&lt;/option&gt;
  &lt;/select&gt;
  &lt;button type=&quot;submit&quot; class=&quot;single_add_to_cart_button button alt disabled wc-variation-is-unavailable&quot;&gt;Add to cart&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The jQuery I came up with, but isn’t working:</p>
  <pre><code>$(document).ready(function() { 
    $('#pa_size').change(function(){
      if($(&quot;#pa_size&quot;).find(&quot;option:selected&quot;).attr('stock-status') == &quot;false&quot;) {
        $(&quot;#container-3 .single_add_to_cart_button&quot;).hide();
      } else {
        $(&quot;#container-3 .single_add_to_cart_button&quot;).show();
      }
    });
  }); 
  
  /* 
  I also tried using the following if statement:
    if($('#pa_size option:selected').attr(&quot;stock-status&quot;) == &quot;false&quot;) {
  */
  </code></pre>
  <p>I set up a jfiddle for it <a href="https://jsfiddle.net/inspirednz/q09t8k2d/" rel="nofollow noreferrer">here</a>.</p>
  <ol>
  <li>My first question, is how do I make this jQuery work, and have I gone about it a suitable way (aside from whatever the error is)?</li>
  </ol>
  <p>I have another related question ...</p>
  <ol start="2">
  <li>What’s the best way to also run this before there’s been any user interaction? Such as, the page has loaded, and there’s a default value selected in the dropdown. I’d like the same test to run against it, so that if the <code>stock-status</code> is already <code>false</code> then the button will hide.</li>
  </ol>