Allowing only one select option of a certain value to be selected
<p>I created a jsfiddle for this at <a href="http://jsfiddle.net/MZtML/" rel="nofollow">http://jsfiddle.net/MZtML/</a></p>

<p>I have a row of images with a select box to determine what type of image it is. These are the options:</p>

<pre><code>&lt;select name="image-type"&gt;
    &lt;option value="none"&gt;Select Image Type&lt;/option&gt;
    &lt;option value="small-thumbnail"&gt;Small Thumbnail (70x50)&lt;/option&gt;
    &lt;option value="thumbnail" selected="selected"&gt;Thumbnail (140x100)&lt;/option&gt;
    &lt;option value="feature"&gt;Feature&lt;/option&gt;
    &lt;option value="gallery"&gt;Gallery&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Now when there are several rows of images, I only want to allow one row to be designated as Feature. If another row is currently set as Feature it should be reset to Select Image Type. The same with Small Thumbnail and Thumbnail.</p>

<p>There can be multiple images set as Select Image Type and as Gallery.</p>

<p>I've been trying using the follow jQuery:</p>

<pre><code>$('#image_container').on('change', '[name="image-type"]', function() {
    $this = $(this);

    $('[name="image-type"]').not($this).each(function() {
        if ($(this).val() === 'feature') {
            $(this).val('none');
        }
    });
});
</code></pre>

<p>I've tried a few variations of this and I have gotten close, but nothing I've tried seems to do it accurately. Can someone help me out?</p>
