waseem02 / jquery-asmselect

Automatically exported from code.google.com/p/jquery-asmselect
0 stars 0 forks source link

Make asmSelect Readonly #53

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
--What steps will reproduce the problem?
1. You have asmSelect in form, styled to fit in page.
2. You want to create a "readonly" version of the form.
3. You want to offload page changes to asmSelect, rather than provide 
alternative display code (mostly for a consistent UI experience)

--What is the expected output? What do you see instead?
You want to provide the asmSelect a "disabled=disabled" attribute and allow 
asmSelect to do the rest.

--What version of the product are you using? On what operating system?
1.0.4a

--Please provide any additional information below.
Adding the attribute "disabled=disabled" to the originating multiple select 
(which is otherwise redundant in a select box due to W3C spec)
and using following code will ensure users cannot change selected options.

Inside init() function, after line 84:

if($original.is(':disabled')){
    $select.replaceWith('<span class="asmDisabledTitle">Selected Options:</span>');
    $ol.find('.asmListItemRemove').remove();
    $ol.addClass('asmListDisabled');
}

This will replace the created select box with a stylable span indicating the 
options have been selected. This means new items cannot be selected. It then 
removes the "remove" links, meaning options can't be unselected. Finally it 
adds a class to the generated list, for additional formatting (in IE, removing 
the 'remove' links causes slight list compression, this gets around that).

Don't forget to then style the following accordingly.
.asmDisabledTitle
.asmListDisabled

Original issue reported on code.google.com by thekiera...@gmail.com on 15 Jul 2011 at 9:44