Javascript disable container, but enable inputs in it
<p>I have the following HTML:</p>

<pre><code>&lt;div class="section_rows"&gt;
    &lt;div class="body-row crew"&gt;
        &lt;input type="text" class="col1" name="cast_person" value="{{cast.person }}"/&gt;
        &lt;input type="text" class="col2" name="cast_character" value="{{ cast.character }}"/&gt;
        &lt;input class="ordering" type="hidden" name="cast_ordering" value="{{ cast.ordering }}" /&gt;
        &lt;a href="#;" class="delete"&gt;X&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And the following jQuery:</p>

<pre><code>// drag and drop of cast and crew
$('.section_rows').sortable();
$( ".section_rows" ).disableSelection();
</code></pre>

<p>Currently, this disables the entire <code>section_rows</code> div container. How would I enabled the <code>input</code>s inside it?</p>
