How to make #states work when dependant element is modified with JS .click() We have custom JS that changes the value of some radio buttons using .click() and we have #states defined in other form elements that react to changes in those radio buttons. 

The #states work fine when the radios are manually clicked but don't work when they are clicked through our custom JS .click() (the radio button values change, but the #states are not fired).

This is how the #states is defined:

'#states' =&gt; array(
  'invisible' =&gt; array(
    ':input[name="field_measure_system[und]"]' =&gt; array('value' =&gt; 'METRIC'),
   ),
),


and this is how the JS modifies the radio button:

$('a.tab-metric').click(function() {
$('#edit-field-measure-system-und-metric').click();


Thanks!
Drupal states are bound to the change event, therefore you need to trigger that one too. The following snipped should do what you want:

$('#id-of-radio-button').trigger('click').trigger('change');