option elements not extended with any Form.Element.Methods

[jwestbrook]

previous lighthouse ticket #1350
by npup

---

option elements are not extended with the Form.Element.Method methods. Two of them (enable and disable) would actually make sense so one could to stuff like

var varyingOptions = form.select("option.special")
  , specials = form.down("input[type=checkbox][name=activate-special]");
varyingOptions.invoke(specials.checked?"enable":"disable");

If it is considered worth it to mix in those two methods, the supplied patch could be used I guess. Or should enable/disable be put in a module of their own to avoid cherry picking from Form.Element.Methods?

Best
/p

From 556b833cc96ed1a8593e9f1f86d57019f9152ff1 Mon Sep 17 00:00:00 2001
From: "P. Envall" <petter.envall@gmail.com>
Date: Thu, 7 Jun 2012 00:29:29 +0200
Subject: [PATCH] Give option elements "enable" and "disable" methods form
 Form.Element.Methods

---
 src/prototype/dom/dom.js     |  1 +
 test/unit/fixtures/form.html |  5 +++++
 test/unit/form_test.js       | 16 +++++++++++++++-
 3 filer ändrade, 21 tillägg(+), 1 borttagning(-)

diff --git a/src/prototype/dom/dom.js b/src/prototype/dom/dom.js
index 5a02d0e..e776c06 100644
--- a/src/prototype/dom/dom.js
+++ b/src/prototype/dom/dom.js
@@ -3460,6 +3460,7 @@
       "FORM":     Object.clone(Form.Methods),
       "INPUT":    Object.clone(Form.Element.Methods),
       "SELECT":   Object.clone(Form.Element.Methods),
+      "OPTION":   Object.clone({"enable": Form.Element.Methods.enable, "disable": Form.Element.Methods.disable}),
       "TEXTAREA": Object.clone(Form.Element.Methods),
       "BUTTON":   Object.clone(Form.Element.Methods)
     });
diff --git a/test/unit/fixtures/form.html b/test/unit/fixtures/form.html
index b0c0605..539a385 100644
--- a/test/unit/fixtures/form.html
+++ b/test/unit/fixtures/form.html
@@ -59,6 +59,11 @@
          <option>Two</option>
          <option selected="selected">Three</option>
       </select>
+      <select name="ed">
+        <option value="0">0</option>
+        <option id="option_disabled" value="1" disabled="disabled">1</option>
+        <option id="option_enabled" value="2">2</option>
+      </select>
     </fieldset>
   </div>

diff --git a/test/unit/form_test.js b/test/unit/form_test.js
index 84e0a10..2006c20 100644
--- a/test/unit/form_test.js
+++ b/test/unit/form_test.js
@@ -165,6 +165,20 @@ new Test.Unit.Runner({
     this.assertEnabled(field);
   },

+  testOptionElementEnabling: function(){
+    var option = $('option_disabled');
+    option.enable();
+    this.assertEnabled(option);
+    option.disable();
+    this.assertDisabled(option);
+
+    option = $('option_enabled');
+    option.disable();
+    this.assertDisabled(option);
+    option.enable();
+    this.assertEnabled(option);
+  },
+
   // due to the lack of a DOM hasFocus() API method,
   // we're simulating things here a little bit
   testFormActivating: function(){
@@ -279,7 +293,7 @@ new Test.Unit.Runner({

     // all kinds of SELECT controls
     var params = Form.serialize('selects_fieldset', true);
-    var expected = { 'nvm[]':['One', 'Three'], evu:'', 'evm[]':['', 'Three'] };
+    var expected = { 'nvm[]':['One', 'Three'], evu:'', 'evm[]':['', 'Three'], ed:'0' };
     this.assertHashEqual(expected, params);
     params = Form.serialize('selects_wrapper', true);
     this.assertHashEqual(Object.extend(expected, { vu:1, 'vm[]':[1, 3], nvu:'One' }), params);
-- 
1.7.11.rc0