Add clarifications to :disabled and :enabled selectors

kswedberg · eddiemonge · commit 6b08fa5099c2 · 2012-10-16T13:46:29.000-04:00
diff --git a/entries/disabled-selector.xml b/entries/disabled-selector.xml
@@ -7,7 +7,12 @@
   </signature>
   <desc>Selects all elements that are disabled.</desc>
   <longdesc>
-    <p>As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$(':disabled')</code> is equivalent to <code>$('*:disabled')</code>, so <code>$('input:disabled')</code> should be used instead. </p>
+    <p>As with other pseudo-class selectors (those that begin with a ":"), it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$(':disabled')</code> is equivalent to <code>$('*:disabled')</code>, so <code>$('input:disabled')</code> or similar should be used instead. </p>
+
+    <p>Although their resulting selections are usually the same, the <code>:disabled</code> selector is subtly different from the <code>[disabled]</code> attribute selector; <code>:disabled</code> checks the boolean (true/false) value of the element's disabled property while <code>[disabled]</code> checks for the existence of the disabled attribute.</p>
+
+    <p>The <code>:disabled</code> selector should only be used for selecting HTML elements that support the <code>disabled</code> attribute (<code>&lt;button&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;optgroup&gt;</code>, <code>&lt;option&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;textarea&gt;</code>).</p>
+
   </longdesc>
   <example>
     <desc>Finds all input elements that are disabled.</desc>
@@ -20,4 +25,4 @@
   </example>
   <category slug="selectors/form-selectors"/>
   <category slug="version/1.0"/>
-</entry>
+</entry>
diff --git a/entries/enabled-selector.xml b/entries/enabled-selector.xml
@@ -7,10 +7,15 @@
   </signature>
   <desc>Selects all elements that are enabled.</desc>
   <longdesc>
-    <p>As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$(':enabled')</code> is equivalent to <code>$('*:enabled')</code>, so <code>$('input:enabled')</code> should be used instead. </p>
+    <p>As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$(':enabled')</code> is equivalent to <code>$('*:enabled')</code>, so <code>$('input:enabled')</code> or similar should be used instead. </p>
+
+    <p>Although their resulting selections are usually the same, <code>:enabled</code> selector is subtly different from <code>:not([disabled])</code>; <code>:enabled</code> selects elements that have their boolean disabled property strictly equal to false, while <code>:not([disabled])</code> selects elements that do not have a disabled <em>attribute</em> set (regardless of its value).</p>
+
+    <p>The <code>:enabled</code> selector should only be used for selecting HTML elements that support the <code>disabled</code> attribute (<code>&lt;button&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;optgroup&gt;</code>, <code>&lt;option&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;textarea&gt;</code>).</p>
+
   </longdesc>
   <example>
-    <desc>Finds all input elements that are enabled.</desc>
+    <desc>Find all input elements that are enabled.</desc>
     <code><![CDATA[$("input:enabled").val("this is it");]]></code>
     <html><![CDATA[<form>
 
@@ -20,4 +25,4 @@
   </example>
   <category slug="selectors/form-selectors"/>
   <category slug="version/1.0"/>
-</entry>
+</entry>
