brianpeiris · November 16, 2009 15:07
diff --git a/gistfile1.htm b/gistfile1.htm
 <!doctype html>
 <html lang="en">
  <head>
    <title>jQuery.fn.disabled()</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
    <style>
    [disabled] {
      border: 1px dashed blue; outline: 1px dashed red; background-color: green;
    }
    </style>
  </head>
  <body>
    <p>
      This jQuery plugin adds the facilitates reading and modifying the <code>disabled</code> attribute on input elements (elements that match the <code>:input</code> selector).
      Similar to jQuery's <code>val()</code> method, the <code>disabled()</code> method takes two forms.
      The first, <code>var areDisabled = els.disabled()</code>, allows you to determine whether all input elements in the selection are disabled.
      The second, <code>els.disabled(true)</code>, allows your disable or enable all the elements in the selection.
    </p>


    <div id="testOne">
      <input />
      
      <input type="radio" name="foo"/>
      <input type="radio" name="foo"/>
      <input type="radio" name="foo"/>
      
      <input type="checkbox"/>
      
      <textarea></textarea>
      
      <select>
        <option>a</option>
        <option>b</option>
        <option>c</option>
      </select>
      
      <span>spam and eggs</span>
      
      <p>lorem ipsum</p>
    </div>
    
    <div id="testTwo">
      <input />
      
      <input type="radio" name="bar"/>
      <input type="radio" name="bar"/>
      <input type="radio" name="bar" disabled="disabled"/>
      
      <input type="checkbox"/>
      
      <textarea></textarea>
      
      <select>
        <option>a</option>
        <option>b</option>
        <option>c</option>
      </select>
      
      <span>spam and eggs</span>
      
      <p>lorem ipsum</p>
    </div>

    <script type="text/javascript">
      (function($){
        $.fn.disabled = function(disable) { 
          var inputs = this.filter(':input');
          if (disable === undefined) {
            var foundEnabled = false;
            inputs.each(function(){
              foundEnabled = !$(this).is(':disabled');
              // returning false will exit the 'each' loop.
              return !foundEnabled;
            });
            return !foundEnabled
          }
          else {
            if (disable) {
              inputs.attr('disabled', 'disabled');
            }
            else {
              inputs.removeAttr('disabled');
            }
            return this;
          }
        }
      })(jQuery);

      console.log($('#testOne').children().disabled());
      console.log($('#testTwo').children().disabled());

      setTimeout(function(){$('#testOne').children().disabled(true);}, 2000);
      setTimeout(function(){$('#testOne').children().disabled(false);}, 4000);
      setTimeout(function(){
        $('#testOne').children().disabled(true);
        console.log($('#testOne').children().disabled());
      }, 6000);


      setTimeout(function(){$('#testTwo').children().disabled(false);}, 8000);
      setTimeout(function(){$('#testTwo').children().disabled(true);}, 10000);
      setTimeout(function(){$('#testTwo').children().disabled(false);}, 12000);
    </script>
  </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>jQuery.fn.disabled()</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
	<style>
	[disabled] {
	border: 1px dashed blue; outline: 1px dashed red; background-color: green;
	}
	</style>
	</head>
	<body>
	<p>
	This jQuery plugin adds the facilitates reading and modifying the <code>disabled</code> attribute on input elements (elements that match the <code>:input</code> selector).
	Similar to jQuery's <code>val()</code> method, the <code>disabled()</code> method takes two forms.
	The first, <code>var areDisabled = els.disabled()</code>, allows you to determine whether all input elements in the selection are disabled.
	The second, <code>els.disabled(true)</code>, allows your disable or enable all the elements in the selection.
	</p>


	<div id="testOne">
	<input />

	<input type="radio" name="foo"/>
	<input type="radio" name="foo"/>
	<input type="radio" name="foo"/>

	<input type="checkbox"/>

	<textarea></textarea>

	<select>
	<option>a</option>
	<option>b</option>
	<option>c</option>
	</select>

	<span>spam and eggs</span>

	<p>lorem ipsum</p>
	</div>

	<div id="testTwo">
	<input />

	<input type="radio" name="bar"/>
	<input type="radio" name="bar"/>
	<input type="radio" name="bar" disabled="disabled"/>

	<input type="checkbox"/>

	<textarea></textarea>

	<select>
	<option>a</option>
	<option>b</option>
	<option>c</option>
	</select>

	<span>spam and eggs</span>

	<p>lorem ipsum</p>
	</div>

	<script type="text/javascript">
	(function($){
	$.fn.disabled = function(disable) {
	var inputs = this.filter(':input');
	if (disable === undefined) {
	var foundEnabled = false;
	inputs.each(function(){
	foundEnabled = !$(this).is(':disabled');
	// returning false will exit the 'each' loop.
	return !foundEnabled;
	});
	return !foundEnabled
	}
	else {
	if (disable) {
	inputs.attr('disabled', 'disabled');
	}
	else {
	inputs.removeAttr('disabled');
	}
	return this;
	}
	}
	})(jQuery);

	console.log($('#testOne').children().disabled());
	console.log($('#testTwo').children().disabled());

	setTimeout(function(){$('#testOne').children().disabled(true);}, 2000);
	setTimeout(function(){$('#testOne').children().disabled(false);}, 4000);
	setTimeout(function(){
	$('#testOne').children().disabled(true);
	console.log($('#testOne').children().disabled());
	}, 6000);


	setTimeout(function(){$('#testTwo').children().disabled(false);}, 8000);
	setTimeout(function(){$('#testTwo').children().disabled(true);}, 10000);
	setTimeout(function(){$('#testTwo').children().disabled(false);}, 12000);
	</script>
	</body>
	</html>