add disabled option

4 files changed, 38 insertions, 24 deletions

diff --git a/demos.html b/demos.html
index 33907ae..ea117cb 100644
--- a/demos.html
+++ b/demos.html
@@ -96,7 +96,7 @@
           </div>
           <div class='multiple'  style='display:none'>
             <form>
-               <select multiple='multiple' id='multipleCountries1' class='multiselect'>
+               <select multiple='multiple' class='multiselect'>
                  <option value='fr'>France</option>
                  <option value='ca'>Canada</option>
                  <option value='ar'>Argentina</option>
@@ -111,7 +111,7 @@
                </select>
              </form>
              <form>
-                <select multiple='multiple' id='multipleCountries2' class='multiselect'>
+                <select multiple='multiple' class='multiselect'>
                   <option value='fr'>France</option>
                   <option value='ca'>Canada</option>
                   <option value='ar'>Argentina</option>
diff --git a/documentation.html b/documentation.html
index 133940d..54e2731 100644
--- a/documentation.html
+++ b/documentation.html
@@ -53,12 +53,17 @@
           <tr>
             <td>selectableHeader</td>
             <td>null</td>
-            <td>Text or HTML to display on the selectable container</td>
+            <td>Text or HTML to display on the selectable container.</td>
           </tr>
           <tr>
             <td>selectedHeader</td>
             <td>null</td>
-            <td>Text or HTML to display on the selected container</td>
+            <td>Text or HTML to display on the selected container.</td>
+          </tr>
+          <tr>
+            <td>disabledClass</td>
+            <td>'disabled'</td>
+            <td>CSS class for disabled items.</td>
           </tr>
         </table>
         <h2>Methods</h2>
diff --git a/index.html b/index.html
index aeb2767..2aa2df5 100644
--- a/index.html
+++ b/index.html
@@ -35,9 +35,9 @@
       <h2>Making your &lt;select&gt; with multiple attribute not suck !</h2>
       <div id='demo'>
         <form>
-          <select multiple='multiple' class='multiselect'>
-            <option value='fr'>France</option>
-            <option value='ca'>Canada</option>
+          <select multiple='multiple' class='multiselect' disabled='disabled'>
+            <option value='fr' title='france'>France</option>
+            <option value='ca' disabled='diabled'>Canada</option>
             <option value='ar'>Argentina</option>
             <option value='pt'>Portugal</option>
             <option value='us'>United States</option>
diff --git a/js/jquery.multi-select.js b/js/jquery.multi-select.js
index fbeec76..4497a3b 100644
--- a/js/jquery.multi-select.js
+++ b/js/jquery.multi-select.js
@@ -3,6 +3,7 @@
   var msMethods = {
     'init' : function(options){
       this.settings = {
+        disabledClass : 'disabled'
       };
       if(options) {
         this.settings = $.extend(this.settings, options);
@@ -14,17 +15,23 @@
       multiSelects.each(function(){
         
         var ms = $(this);
-        ms.attr('id', ms.attr('id') != undefined ? ms.attr('id') : 'select'+((new Date()).getTime()));
-        var container = $('<div id="ms-'+ms.attr('id')+'" class="ms-container"></div>').detach(),
-            selectableContainer = $('<div class="ms-selectable"></div>').detach(),
-            selectedContainer = $('<div class="ms-selection"></div>').detach(),
-            selectableUl = $('<ul></ul>').detach(),
-            selectedUl = $('<ul></ul>').detach();
+        ms.attr('id', ms.attr('id') != undefined ? ms.attr('id') : 'ms-'+Math.ceil(Math.random()*1000));
+        var container = $('<div id="ms-'+ms.attr('id')+'" class="ms-container"></div>'),
+            selectableContainer = $('<div class="ms-selectable"></div>'),
+            selectedContainer = $('<div class="ms-selection"></div>'),
+            selectableUl = $('<ul></ul>'),
+            selectedUl = $('<ul></ul>');
         
         ms.data('settings', multiSelects.settings);
         ms.children('option').each(function(){
-          var selectableLi = $('<li ms-value="'+$(this).val()+'">'+$(this).text()+'</li>').detach();
+          var selectableLi = $('<li ms-value="'+$(this).val()+'">'+$(this).text()+'</li>');
           
+          // if ($(this).attr('title'))
+          //   selectableLi.attr('title', $(this).attr('title'));
+          if ($(this).attr('disabled') || ms.attr('disabled')){
+            selectableLi.attr('disabled', 'disabled');
+            selectableLi.addClass(multiSelects.settings.disabledClass)
+          }
           selectableLi.click(function(){
             ms.multiSelect('select', $(this).attr('ms-value'));
           });
@@ -53,20 +60,22 @@
           text = ms.find('option[value="'+value+'"]').text();
       
       if(alreadyPresent == -1 || method == 'init'){
-        var selectedLi = $('<li ms-value="'+value+'">'+text+'</li>').detach(),
+        var selectedLi = $('<li ms-value="'+value+'">'+text+'</li>'),
             newValues = $.merge(msValues, [value]),
             selectableUl = $('#ms-'+ms.attr('id')+' .ms-selectable ul'),
             selectedUl = $('#ms-'+ms.attr('id')+' .ms-selection ul'),
             selectableLi = selectableUl.children('li[ms-value="'+value+'"]');
         
-        selectableLi.hide();
-        ms.val(newValues);
-        selectedLi.click(function(){
-          ms.multiSelect('deselect', $(this).attr('ms-value'));
-        });
-        selectedUl.append(selectedLi);
-        if (typeof ms.data('settings').afterSelect == 'function' && method != 'init') {
-          ms.data('settings').afterSelect.call(this, value, text);
+        if (!selectableLi.attr('disabled')){
+          selectableLi.hide();
+          ms.val(newValues);
+          selectedLi.click(function(){
+            ms.multiSelect('deselect', $(this).attr('ms-value'));
+          });
+          selectedUl.append(selectedLi);
+          if (typeof ms.data('settings').afterSelect == 'function' && method != 'init') {
+            ms.data('settings').afterSelect.call(this, value, text);
+          }
         }
       }
     },
@@ -80,7 +89,7 @@
         var selectableUl = $('#ms-'+ms.attr('id')+' .ms-selectable ul'),
             selectedUl = $('#ms-'+ms.attr('id')+' .ms-selection ul'),
             selectableLi = selectableUl.children('li[ms-value="'+value+'"]'),
-            selectedLi = selectedUl.children('li[ms-value="'+value+'"]').detach();
+            selectedLi = selectedUl.children('li[ms-value="'+value+'"]');
         
         ms.val(newValues);
         selectableLi.show();