Applying CSS and element when the checked radio button after it is checked (live)
<p>I'm trying to apply CSS to the element next to a radio button, but nothing happens:</p>

<pre><code> $('.ordering-options input[type="radio"]').live("change", function(){
    $('input[type="radio"]:checked').next().css('color', 'red');
  });
</code></pre>

<p>(I also want the default checked radio button to have the CSS applied before any action)</p>

<p>Any suggestions in order to accomplish this?</p>

<p>EDIT: The CSS is applied and disappears in a  second.</p>

<p>HTML:</p>

<pre><code>&lt;fieldset class="ordering-options"&gt;
    &lt;h2 class="ordering-method"&gt;Ordering method:&lt;/h2&gt;

    &lt;ul&gt;
      &lt;li&gt;&lt;input type="radio" name="take-out" value="false" checked="checked" class=
      "takeout-select" /&gt;&lt;span&gt;Take Out&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;ul&gt;
      &lt;li&gt;&lt;input type="radio" name="delivery" value="true" class=
      "delivery-select" /&gt;&lt;span&gt;Delivery&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/fieldset&gt;
</code></pre>

<p>('Take out' is red by default. If the user clicks 'Delivery', the span after it will turn red and vice versa).</p>
