Databases
StackOverflow2013
Postsdbo
POChange a jQuery UI Dropdown's background color depending on Checkbox status
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange a jQuery UI Dropdown's background color depending on Checkbox status
    primarykey
    data
    text
    <p>I'm using <a href="http://bit.ly/nBxRGR" rel="nofollow">jQuery UI SelectMenu</a> and <a href="http://bit.ly/qQIKmn" rel="nofollow">jQuery UI Custom Checkboxes and Radio Buttons</a> to style a form on a page. In setting up the form, I define my dropdown as such:</p> <pre><code>$('select#em_basic_life_plans').selectmenu({ style:'dropdown', width: 378, maxHeight: 238 }); </code></pre> <p>And create the dropdown within the page like so:</p> <pre><code>&lt;fieldset&gt; &lt;select name="em_basic_life_plans" id="em_basic_life_plans" tabindex="10" /&gt; &lt;option value="" selected="" class="selectmenu-req-format"&gt;Plan: select&lt;/option&gt; &lt;option value="5K"&gt;Plan: 5K Flat Benefit&lt;/option&gt; &lt;option value="10K"&gt;Plan: 10K Flat Benefit&lt;/option&gt; &lt;option value="100K Maximum"&gt;Plan: 100K Maximum&lt;/option&gt; &lt;/select&gt; &lt;/fieldset&gt; </code></pre> <p>Because there are some dropdowns (like the one above) which are required, I style them with a light yellow background and dark yellow text so that the user knows they are required (optional dropdowns have a light grey background and grey text). I do this by declaring a background color different from the light grey default set in my SelectMenu CSS and by also applying a separate class to the text like so:</p> <pre><code>#em_basic_life_plans-button {background-color: #fff4bf !important;} </code></pre> <p>and, written into the option itself (as seen above):</p> <pre><code>class="selectmenu-req-format" </code></pre> <p>Hopefully that sets things up. Now for my question:</p> <p><strong>How do I change the background color of the above dropdown from light yellow back to light grey, depending on when a certain checkbox on the page is unchecked?</strong></p> <p><strong>I thought that this would work:</strong></p> <pre><code>$('#basic_cov_life').click(function() { if ($('#basic_cov_life').is(':checked')) { alert("Debugging: this is now checked."); } else { $('#em_basic_life_plans-button').css('background-color:#B3B3B3;'); } }); </code></pre> <p>The code for determining whether or not the checkbox (#basic_cov_life) is checked is working... it's just the code to change the color back to grey that isn't working:</p> <pre><code>$('#em_basic_life_plans-button').css('background-color:#B3B3B3;'); </code></pre> <p>Any ideas on what to do to change the background color back to light grey? And also, though I haven't gotten to it yet with the above code, I would need the text to change back to grey as well.</p> <p>Thanks so much in advance for any insight!</p> <p>Berklie</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USBerklie
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload