title: how can i select item in a form, change the background and submit
body: <p>I am trying to select one of the Item element, then change the background color to blue when selected (disable any other item from changing background color i.e. only one element can be selected) and then submit the form. I would only like to submit when one of the item is selected else alert.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $('form').on('click', 'div', function(e) {        
      e.preventDefault();   
      $('#done').attr('disabled','disabled');     
      $('input').removeClass('bluebg');
      $('div').removeClass('bluebg');        
      $(this).addClass('bluebg');    
  
    });
  
    $('#ok').click(function() {
      if($('div').hasClass('bluebg'))
      {
        document.location.href='page.aspx';
      }
      else { alert('Item is not selected');}
    });        
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form&gt;
      &lt;div id="item1"&gt;Item1&lt;/div&gt;
      &lt;div id="item2"&gt;Item2&lt;/div&gt;
      &lt;div id="item3"&gt;Item3&lt;/div&gt;
      &lt;input type="button" value="OK" id="ok" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's how output should look:</p>
  
  <p><a href="https://i.stack.imgur.com/iOV5U.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iOV5U.gif" alt="enter image description here"></a></p>