0

I'm using jQuery successfully and creating radio buttons nicely. However, I am annoyed that the labels on the buttons can be highlighted with a click-drag operation. When I've had too much caffeine or clicking multiple buttons in rapid succession, sometimes I will hold down the mouse button too long while moving the mouse and end up selecting the label text instead of clicking on the button itself. Here's the representative code I'm using:

HTML:

<span id='yesNoSelector'>
   <input type='radio' id='yesNoSelector0' name='yesNoSelector' value='Yes'>
      <label for='yesNoSelector0'>Yes</label>
   <input type='radio' id='yesNoSelector1' name='yesNoSelector' value='No'>
      <label for='yesNoSelector1'>No</label>
</span>

JavaScript: (the validate() function is my own to ensure the value is "legal")

<script>
   $( #yesNoSelector ).buttonset();
   $( input[name='yesNoSelector']).change(function(){ validate(); });
</script>

I have no CSS (beyond what is provided with jQuery). Can anyone tell me if it's possible to not make the label text highlightable (without requiring images), or provide a workaround?

Thanks!

Jonas
  • 121,568
  • 97
  • 310
  • 388
Danny Diaz
  • 17
  • 7

0 Answers0