title: Prevent arrow keys from changing selected radio button
body: <p>I've got a couple of radio buttons and I would like to prevent the pressing of the up/down arrow keys to change the selected radio button.</p>
  
  <p>If you select one of the radio buttons and then press the up/down arrow key it will select the previous or next radio button. Instead I want the selection to remain unchanged. For this I could just use <code>event.preventDefault();</code> on certain key presses. However I still want the user to be able to scroll up and down on the page by pressing the arrow keys.</p>
  
  <p>How do I do that?</p>
  
  <p>Radio buttons:</p>
  
  <pre><code>&lt;label&gt;Value
      &lt;input type="radio" name="myradiobtn" value="value1"&gt;
  &lt;/label&gt;
  &lt;label&gt;Value
      &lt;input type="radio" name="myradiobtn" value="value2"&gt;
  &lt;/label&gt;
  &lt;label&gt;Value
      &lt;input type="radio" name="myradiobtn" value="value3"&gt;
  &lt;/label&gt;
  &lt;label&gt;Value
      &lt;input type="radio" name="myradiobtn" value="value4"&gt;
  &lt;/label&gt;
  &lt;label&gt;Value
      &lt;input type="radio" name="myradiobtn" value="value5"&gt;  
  &lt;/label&gt; 
  </code></pre>
  
  <p>Javascript attempt (not working):</p>
  
  <pre><code>$(document).keydown(function(e) {
      var arrowKeys = [37,38,39,40];
      if (arrowKeys.indexOf(e.which) !== -1) {
          $('input[type="radio"]').each(function( index ) {
            $(this).blur();
          });
      }
  });
  </code></pre>
  
  <p>JsFiddle:</p>
  
  <p><a href="http://jsfiddle.net/w0jh9ney/" rel="nofollow">http://jsfiddle.net/w0jh9ney/</a></p>