IE not selecting form field when label is clicked an form field is hidden

Question

I am using jQuery to hide form fields (I am manipulating checkboxes and radio buttons).

In FF and Chrome, when I click the associated label, the form field still activates and checks. In IE, that does not happen.

How can I have the label activate the checkboxes/radio buttons in IE?

Answer 1

I've experienced this before as well. You may be better off moving the hidden fields off the screen instead of hiding them.

In fact, I did ask that question on SO:

http://stackoverflow.com/questions/1252690/ie-hidden-radio-button-not-checked-when-the-corresponding-label-is-clicked

Answer 2

How are you hiding it? You may need to move it off-screen via some radical css:

.hidden { position:relative; left: -10000 }

And then toggle the .hidden class to show/hide the element.

Answer 3

I've run into this too. IE will not change the value of hidden form fields. You have to unhide them first. Probably the easiest way is to add an onclick action to all labels that are allowed to have hidden form fields. Something like:

$("label.hideablefield").live('click', function(){
  var fid = $(this).attr('for');
  $('#'+ fid).show();
  $('#'+ fid).select(); //or maybe .focus, I'm not sure 
});

Obviously, this only turns the field on. You'd need to set up a toggle condition for re-hiding/unselecting.