Databases
StackOverflow2013
Postsdbo
POWhen select box option is selected, hide and uncheck corresponding checkbox using jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhen select box option is selected, hide and uncheck corresponding checkbox using jQuery
    primarykey
    data
    text
    <p>When an option is selected the corresponding checkbox <code>&lt;div&gt;</code> is automatically hidden using jQuery. For example, user selects Item 1 from the select box, and <code>&lt;div class="item1"&gt;</code> is immediately hidden. </p> <p><strong>Caveat:</strong> Both will be visible, so the user changing the select option must be accounted for (eg. user selects an option who's corresponding checkbox has already been checked). The checked state must be removed and the corresponding <code>&lt;div&gt;</code> should hide. </p> <p>Needs to be compatible with FF, Safari, Opera, IE7 + 8 (6 if possible, not required)</p> <p><strong>Update</strong>: The corresponding <code>&lt;div&gt;</code> of the default selected option should be hidden on page load.</p> <p><strong>Update 2</strong>: This is now resolved. Thanks a ton to both Joel and ckramer. Both proposed solutions work perfectly. I chose ckramer's solution as the accepted answer because it required no extra markup, but both solutions work great!</p> <pre><code>&lt;select&gt; &lt;option selected="selected" id="item1" value="1"&gt;Item 1&lt;/option&gt; &lt;option id="item2" value="2"&gt;Item 2&lt;/option&gt; &lt;option id="item3" value="3"&gt;Item 3&lt;/option&gt; &lt;/select&gt; &lt;div class="item1"&gt; &lt;input type="checkbox" id="a-item1" value="5" /&gt; &lt;label class="checkbox" for="a-item1"&gt;Item 1&lt;/label&gt; &lt;/div&gt; &lt;div class="item2"&gt; &lt;input type="checkbox" id="a-item2" value="6" /&gt; &lt;label class="checkbox" for="a-item2"&gt;Item 2&lt;/label&gt; &lt;/div&gt; &lt;div class="item3"&gt; &lt;input type="checkbox" id="a-item3" value="7" /&gt; &lt;label class="checkbox" for="a-item3"&gt;Item 3&lt;/label&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USm1755
    1. USm1755
    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. VO
      singulars
      1. POWhen select box option is selected, hide and uncheck corresponding checkbox using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    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