Question

I am building a form that will submit via ajax to a background page. I want to present options as a multiselect control, but with a “None of the Above” option.

The question is, is it possible to make this so that it impossible to select the “None” option AND still select other options? For example:

<select id="country" multiple="multiple">
    <option value>None</option>
    <option value="1">Jamaica</option>
    <option value="2">Cuba</option>
    <option value="3">France</option>
</select>​​​​​​​​​​​​​​​​​​​​​

It would be valid for users to select “None” alone, or “Cuba” and “France” together– but not “None” and “France”. So if a user selected “None” and then anything else, the “None” option would be unselected automatically?

I’m using jQuery in the page if that helps matters.

Answer 1

Strange requirements, but anyway this might work for you:

$('#country').change(function() {
    if ($('option:first', this).is(':selected')) {
        $('option:not(:first)', this).prop('selected', false);
    }
});​

http://jsfiddle.net/zhKKw/