I've been testing bootstrap-duallistbox and its fantastic, but I was wondering how to disable the bootstrap-dual listbox at the beginning:

so I have:

<select multiple="multiple" size="10" class="dual-list" disabled>
 <option value="1">1</option>
 <option value="2">2</option>
</select>

after call: $(".dual-list").bootstrapDualListbox(); the dual list is not disabled.

I've been testing bootstrap-duallistbox and its fantastic, but I was wondering how to disable the bootstrap-dual listbox at the beginning:

so I have:

<select multiple="multiple" size="10" class="dual-list" disabled>
 <option value="1">1</option>
 <option value="2">2</option>
</select>

after call: $(".dual-list").bootstrapDualListbox(); the dual list is not disabled.

• javascript
• jquery

Share Improve this question Follow asked Aug 11, 2014 at 16:24 Juan JardimJuan Jardim 2,25266 gold badges2929 silver badges4747 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Look in the ments section of the link you posted:

There is no built-in support for disable, so you need to disable the proper elements by selecting them by hand, something like that:

$('select[name="duallistbox_demo1[]_helper1"]').prop('disabled', true);
$('select[name="duallistbox_demo1[]_helper2"]').prop('disabled', true);
$('select[name="duallistbox_demo1[]"]').parent().find('.moveall').prop('disabled',true);
$('select[name="duallistbox_demo1[]"]').parent().find('.move').prop('disabled',true);
$('select[name="duallistbox_demo1[]"]').parent().find('.removeall').prop('disabled',true);
$('select[name="duallistbox_demo1[]"]').parent().find('.remove').prop('disabled',true);

:) .. Well, I was managing this via this one line instead of 6 or 7. A property would have been cleaner. Thanks though

    $(".bootstrap-duallistbox-container").find("*").prop("disabled",true);

via István Ujj-Mészáros and WorkerBee