CODEWITHSUNDEEP
javascriptjquery
David542
David542

Reputation: 110123

Javascript disable container, but enable inputs in it

I have the following HTML:

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

And the following jQuery:

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

Currently, this disables the entire section_rows div container. How would I enabled the inputs inside it?

Upvotes: 0

Views: 140

Answers (3)

charlietfl
charlietfl

Reputation: 171679

Can use handle option of draggable to only use an element within the container to drag with. Best solution will depend on your UI but this can be a helpful solution. Then don't worry about calling disableSelection()

Upvotes: 1

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

How about this?

$('.selection_rows :not(input)').disableSelection();

Upvotes: 0

gdoron
gdoron

Reputation: 150253

Quite obvious I believe:

$( ".section_rows" ).disableSelection().find('input').prop('disabled', false);

Upvotes: 1

Related Questions