jQuery validation - Select only one option between 3 select boxes
<p>Good Day</p>

<p>I have 3 select boxes. Now what i would like to do is allow a user to only select a value in one of the boxes, but not more than one box. The boxes may all be empty.</p>

<p>So yo can have one of the following selected to let the submit be successful:</p>

<p>None(---)
OR
1/2 /3
OR
Blue/Green/Purple 
OR
Big/Medium/Small </p>

<pre><code>&lt;select&gt;
      &lt;option&gt;---&lt;/option&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
    &lt;/select&gt;
    &lt;br /&gt;&lt;br /&gt;
    &lt;select&gt;
      &lt;option&gt;---&lt;/option&gt;
      &lt;option&gt;Blue&lt;/option&gt;
      &lt;option&gt;Green&lt;/option&gt;
      &lt;option&gt;Purple&lt;/option&gt;
    &lt;/select&gt;
    &lt;br /&gt;&lt;br /&gt;
    &lt;select&gt;
      &lt;option&gt;---&lt;/option&gt;
      &lt;option&gt;Big&lt;/option&gt;
      &lt;option&gt;Medium&lt;/option&gt;
      &lt;option&gt;Small&lt;/option&gt;
    &lt;/select&gt;
    &lt;br /&gt;&lt;br /&gt;
    &lt;input type="submit" /&gt;
</code></pre>

<p>jQuery</p>

<pre><code>$('input[type="submit"]').click(function(){

$('select').each(function() {
     var i = 0;
     if($(this).attr('option','selected').val() != "---"){
        i++;
     };
  });

if(i &gt; 1){
        $('input[type="submit"]').prop('disabled', true);
        alert('You can only choose one option!');
}
else {
        alert('Form Submitted successfully');
}

});
</code></pre>

<p>But this does not work at all.</p>

<p><strong>See my <a href="http://jsfiddle.net/2DzUV/16/" rel="nofollow">JSFiddle</a></strong></p>
