Add checkbox option for multiple selectbox

celtra · Mar 10, 2015 · fd05a17 · fd05a17
1 parent 6de4bc0
commit fd05a17
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/demo/index.html b/demo/index.html
@@ -305,6 +305,19 @@ <h3>Select boxes</h3>
                 <option value="10">Ten</option>
             </select>
 
+            <select class="reform-selectbox reform-pure" multiple data-showcheckbox="true" data-title="Also add checkboxes">
+                <option value="1">One</option>
+                <option value="2">Two</option>
+                <option value="3">Three</option>
+                <option value="4">Four</option>
+                <option value="5">Five</option>
+                <option value="6">Six</option>
+                <option value="7">Seven</option>
+                <option value="8">Eight</option>
+                <option value="9">Nine</option>
+                <option value="10">Ten</option>
+            </select>
+
             <select class="reform-selectbox reform-pure" title="I feel empty inside"></select>
 
             <select class="reform-selectbox reform-pure" title=""></select>

diff --git a/less/floater_abstract.less b/less/floater_abstract.less
@@ -23,7 +23,13 @@
             .ellipsis;
             padding : @paddingVertical @paddingHorizontal;
             cursor  : pointer;
-
+
+            .reform-checkbox-fake {
+                height       : @fontSize;
+                width        : @fontSize;
+                margin-right : @fontSize;
+            }
+
             &.hover {
                 background : @hoverBackgroundColor;
                 color      : @hoverFontColor;

diff --git a/src/selectbox_abstract.coffee b/src/selectbox_abstract.coffee
@@ -11,6 +11,8 @@ class SelectBoxAbstract
             fakeClass : 'reform-selectbox-fake'
         }, options
 
+        $.extend @options, @orig.data()
+
         # Don't do this twice
         return if @orig.is '.reformed'
 
@@ -164,6 +166,16 @@ class SelectBoxAbstract
             $item.attr 'title', $option.attr 'title'
             $item.attr 'value', $option.val()
 
+            if @options.showcheckbox and @orig.is '[multiple]'
+                checkboxOptions =
+                    type: 'checkbox'
+                    class: 'reform-checkbox'
+
+                checkboxOptions.checked = 'checked'  if $option.is ':selected'
+                checkboxOptions.checked = 'disabled' if $option.is ':disabled'
+
+                $item.append($('<input>', checkboxOptions))
+
             $item.append @createItemContent $option
 
             # Disable selected item, add values in @listMultiple