References #68 - Adding disableOption() method

demos/default.html

@@ -15,7 +15,7 @@
 <form>
 <select id="test">
   <option value="Select a Month">Select a Month</option>
-  <option value="January">January</option>
+  <option value="January" disabled>January</option>
   <option value="February">February</option>
   <option value="March">March</option>
   <option value="April">April</option>
@@ -31,7 +31,7 @@
 
 <select id="test1">
   <option value="Select a Month">Select a Month</option>
-  <option value="January">January</option>
+  <option value="January" disabled>January</option>
   <option value="February">February</option>
   <option value="March">March</option>
   <option value="April">April</option>
@@ -54,7 +54,7 @@
 <script src="../src/javascripts/jquery.selectBoxIt.js"></script>
 <script>
 $(function() {
-    $("#test").selectBoxIt().data("selectBoxIt");
+    window.selectBox = $("#test").selectBoxIt().data("selectBoxIt");
     $('#test1').selectBoxIt({theme: "jqueryui"}).data("selectBoxIt");
 
 });

src/javascripts/jquery.selectBoxIt.core.js

@@ -1093,7 +1093,7 @@
             // Select box individual options events bound with the jQuery `delegate` method.  `Delegate` was used because binding individual events to each list item (since we don't know how many there will be) would decrease performance.  Instead, we bind each event to the unordered list, provide the list item context, and allow the list item events to bubble up (`event bubbling`). This greatly increases page performance because we only have to bind an event to one element instead of x number of elements. Delegates the `click` event with the `selectBoxIt` namespace to the list items
             .delegate("li", "click.selectBoxIt", function() {
 
-                if (!$(this).data("disabled")) {
+                if ($(this).attr("data-disabled") === "false") {
 
                     // Sets the original dropdown list value and triggers the `change` event on the original select box
                     self.selectBox.val($(this).attr("data-val"));
@@ -1123,7 +1123,7 @@
             // Delegates the `focus` event with the `selectBoxIt` namespace to the list items
             .delegate("li", "focus.selectBoxIt", function() {
 
-                if (!$(this).data("disabled")) {
+                if ($(this).attr("data-disabled") === "false") {
 
                     // Sets the original select box current value and triggers the change event
                     self.originalElem.value = $(this).attr("data-val");

src/javascripts/jquery.selectBoxIt.disable.js

@@ -1,41 +1,115 @@
 $(function() {
 
-    //Disable
-    // ------
+    // Disable
+    // -------
     //      Disables the new dropdown list
 
-    $.selectBox.selectBoxIt.prototype.disable = function(callback) {
+    $.selectBox.selectBoxIt.prototype.disable = function(index, callback) {
 
         var self = this;
 
         if(!self.options["disabled"]) {
 
-            //Makes sure the dropdown list is closed
+            // Makes sure the dropdown list is closed
             self.close();
 
-            //Triggers a `disable` custom event on the original select box
+            // Triggers a `disable` custom event on the original select box
             self.selectBox.trigger("disable").
 
-            //Sets the `disabled` attribute on the original select box
-            attr("disabled", "disabled");
+            // Sets the `disabled` attribute on the original select box
+           attr("disabled", "disabled");
 
-            //Makes the dropdown list not focusable by removing the `tabindex` attribute
-            self.div.removeAttr("tabindex")
+           // Makes the dropdown list not focusable by removing the `tabindex` attribute
+           self.div.removeAttr("tabindex")
 
-            //Enabled styling for disabled state
-            .addClass("selectboxit-disabled");
+           // Enabled styling for disabled state
+           .addClass("selectboxit-disabled");
 
-            // Calls the jQueryUI Widget Factory disable method to make sure all options are correctly synced
-            $.Widget.prototype.disable.call(self);
+           // Calls the jQueryUI Widget Factory disable method to make sure all options are correctly synced
+           $.Widget.prototype.disable.call(self);
 
-            //Provides callback function support
-            self._callbackSupport(callback);
+        }
+
+        // Provides callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
+    };
+
+    // Disable Option
+    // --------------
+    //      Disables a single drop down option
+
+    $.selectBox.selectBoxIt.prototype.disableOption = function(index, callback) {
+
+        var self = this, currentSelectBoxOption, currentIndex = 0, hasNextEnabled, hasPreviousEnabled;
+
+        // If an index is passed to target an individual drop down option
+        if(typeof index === "number") {
+
+            // Makes sure the dropdown list is closed
+            self.close();
+
+            // The select box option being targeted
+            currentSelectBoxOption = self.selectBox.find("option").eq(index);
+
+            currentIndex = self.options["showFirstOption"] ? index: ((index - 1) >= 0 ? index: 0 );
+
+            // Triggers a `disable-option` custom event on the original select box
+            self.selectBox.trigger("disable-option");
+
+            // Disables the targeted select box option
+            currentSelectBoxOption.attr("disabled", "disabled");
+
+            // Disables the drop down option
+            self.listItems.eq(index).attr("data-disabled", "true").
 
-            //Maintains chainability
-            return self;
+            // Applies disabled styling for the drop down option
+            addClass("ui-state-disabled");
+
+            // If the currently selected drop down option is the item being disabled
+            if(self.currentFocus === index) {
+
+                hasNextEnabled = self.listItems.eq(self.currentFocus).nextAll("li").not("[data-disabled='true']").first().length;
+
+                hasPreviousEnabled = self.listItems.eq(self.currentFocus).prevAll("li").not("[data-disabled='true']").first().length;
+
+                // If there is a currently enabled option beneath the currently selected option
+                if(hasNextEnabled) {
+
+                    // Selects the option beneath the currently selected option
+                    self.moveDown();
+
+                }
+
+                // If there is a currently enabled option above the currently selected option
+                else if(hasPreviousEnabled) {
+
+                    // Selects the option above the currently selected option
+                    self.moveUp();
+
+                }
+
+                // If there is not a currently enabled option
+                else {
+
+                    // Disables the entire drop down list
+                    self.disable();
+
+                }
+
+            }
 
         }
 
+        // Provides callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
     };
 
     //_Is Disabled

src/javascripts/jquery.selectBoxIt.js

@@ -1093,7 +1093,7 @@
             // Select box individual options events bound with the jQuery `delegate` method.  `Delegate` was used because binding individual events to each list item (since we don't know how many there will be) would decrease performance.  Instead, we bind each event to the unordered list, provide the list item context, and allow the list item events to bubble up (`event bubbling`). This greatly increases page performance because we only have to bind an event to one element instead of x number of elements. Delegates the `click` event with the `selectBoxIt` namespace to the list items
             .delegate("li", "click.selectBoxIt", function() {
 
-                if (!$(this).data("disabled")) {
+                if ($(this).attr("data-disabled") === "false") {
 
                     // Sets the original dropdown list value and triggers the `change` event on the original select box
                     self.selectBox.val($(this).attr("data-val"));
@@ -1123,7 +1123,7 @@
             // Delegates the `focus` event with the `selectBoxIt` namespace to the list items
             .delegate("li", "focus.selectBoxIt", function() {
 
-                if (!$(this).data("disabled")) {
+                if ($(this).attr("data-disabled") === "false") {
 
                     // Sets the original select box current value and triggers the change event
                     self.originalElem.value = $(this).attr("data-val");
@@ -1668,42 +1668,116 @@ $(function() {
 });
 $(function() {
 
-    //Disable
-    // ------
+    // Disable
+    // -------
     //      Disables the new dropdown list
 
-    $.selectBox.selectBoxIt.prototype.disable = function(callback) {
+    $.selectBox.selectBoxIt.prototype.disable = function(index, callback) {
 
         var self = this;
 
         if(!self.options["disabled"]) {
 
-            //Makes sure the dropdown list is closed
+            // Makes sure the dropdown list is closed
             self.close();
 
-            //Triggers a `disable` custom event on the original select box
+            // Triggers a `disable` custom event on the original select box
             self.selectBox.trigger("disable").
 
-            //Sets the `disabled` attribute on the original select box
-            attr("disabled", "disabled");
+            // Sets the `disabled` attribute on the original select box
+           attr("disabled", "disabled");
 
-            //Makes the dropdown list not focusable by removing the `tabindex` attribute
-            self.div.removeAttr("tabindex")
+           // Makes the dropdown list not focusable by removing the `tabindex` attribute
+           self.div.removeAttr("tabindex")
 
-            //Enabled styling for disabled state
-            .addClass("selectboxit-disabled");
+           // Enabled styling for disabled state
+           .addClass("selectboxit-disabled");
 
-            // Calls the jQueryUI Widget Factory disable method to make sure all options are correctly synced
-            $.Widget.prototype.disable.call(self);
+           // Calls the jQueryUI Widget Factory disable method to make sure all options are correctly synced
+           $.Widget.prototype.disable.call(self);
 
-            //Provides callback function support
-            self._callbackSupport(callback);
+        }
 
-            //Maintains chainability
-            return self;
+        // Provides callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
+    };
+
+    // Disable Option
+    // --------------
+    //      Disables a single drop down option
+
+    $.selectBox.selectBoxIt.prototype.disableOption = function(index, callback) {
+
+        var self = this, currentSelectBoxOption, currentIndex = 0, hasNextEnabled, hasPreviousEnabled;
+
+        // If an index is passed to target an individual drop down option
+        if(typeof index === "number") {
+
+            // Makes sure the dropdown list is closed
+            self.close();
+
+            // The select box option being targeted
+            currentSelectBoxOption = self.selectBox.find("option").eq(index);
+
+            currentIndex = self.options["showFirstOption"] ? index: ((index - 1) >= 0 ? index: 0 );
+
+            // Triggers a `disable-option` custom event on the original select box
+            self.selectBox.trigger("disable-option");
+
+            // Disables the targeted select box option
+            currentSelectBoxOption.attr("disabled", "disabled");
+
+            // Disables the drop down option
+            self.listItems.eq(index).attr("data-disabled", "true").
+
+            // Applies disabled styling for the drop down option
+            addClass("ui-state-disabled");
+
+            // If the currently selected drop down option is the item being disabled
+            if(self.currentFocus === index) {
+
+                hasNextEnabled = self.listItems.eq(self.currentFocus).nextAll("li").not("[data-disabled='true']").first().length;
+
+                hasPreviousEnabled = self.listItems.eq(self.currentFocus).prevAll("li").not("[data-disabled='true']").first().length;
+
+                // If there is a currently enabled option beneath the currently selected option
+                if(hasNextEnabled) {
+
+                    // Selects the option beneath the currently selected option
+                    self.moveDown();
+
+                }
+
+                // If there is a currently enabled option above the currently selected option
+                else if(hasPreviousEnabled) {
+
+                    // Selects the option above the currently selected option
+                    self.moveUp();
+
+                }
+
+                // If there is not a currently enabled option
+                else {
+
+                    // Disables the entire drop down list
+                    self.disable();
+
+                }
+
+            }
 
         }
 
+        // Provides callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
     };
 
     //_Is Disabled
@@ -1869,7 +1943,7 @@ $(function() {
         self.currentFocus += 1;
 
         // Determines whether the dropdown option the user is trying to go to is currently disabled
-        var disabled = self.listItems.eq(self.currentFocus).data("disabled"),
+        var disabled = self.listItems.eq(self.currentFocus).attr("data-disabled") === "true" ? true: false,
 
             hasNextEnabled = self.listItems.eq(self.currentFocus).nextAll("li").not("[data-disabled='true']").first().length;
 
@@ -1939,7 +2013,7 @@ $(function() {
         self.currentFocus -= 1;
 
         // Determines whether the dropdown option the user is trying to go to is currently disabled
-        var disabled = self.listItems.eq(self.currentFocus).data("disabled"),
+        var disabled = self.listItems.eq(self.currentFocus).attr("data-disabled") === "true" ? true: false,
 
             hasPreviousEnabled = self.listItems.eq(self.currentFocus).prevAll("li").not("[data-disabled='true']").first().length;
 

src/javascripts/jquery.selectBoxIt.keyboardNavigation.js

@@ -12,7 +12,7 @@ $(function() {
         self.currentFocus += 1;
 
         // Determines whether the dropdown option the user is trying to go to is currently disabled
-        var disabled = self.listItems.eq(self.currentFocus).data("disabled"),
+        var disabled = self.listItems.eq(self.currentFocus).attr("data-disabled") === "true" ? true: false,
 
             hasNextEnabled = self.listItems.eq(self.currentFocus).nextAll("li").not("[data-disabled='true']").first().length;
 
@@ -82,7 +82,7 @@ $(function() {
         self.currentFocus -= 1;
 
         // Determines whether the dropdown option the user is trying to go to is currently disabled
-        var disabled = self.listItems.eq(self.currentFocus).data("disabled"),
+        var disabled = self.listItems.eq(self.currentFocus).attr("data-disabled") === "true" ? true: false,
 
             hasPreviousEnabled = self.listItems.eq(self.currentFocus).prevAll("li").not("[data-disabled='true']").first().length;