title: Dynamically added property not visible in html element
body: <p>I added the 'disabled' property to a <code>textbox</code> input field dynamically with <code>jQuery</code>. But looking to the generated <code>HTML</code>, it's not visible on the <code>textbox</code> input field to which I have added the 'disabled' property to.</p>
  
  <p>And because it's not added to it, my other jQuery function never gets entered.</p>
  
  <p>Here is my code:</p>
  
  <p>This happens some where in the doc load event:</p>
  
  <p><code>$('.testGroup :input').prop('disabled', true)</code></p>
  
  <p>This function shows a tooltip when you <code>click</code> or <code>hover</code> over disabled inputs:</p>
  
  <pre><code>$('input:disabled').after(function (e) {
          debugger;
          d = $("&lt;div&gt;");
          i = $(this);
          d.css({
              height: i.outerHeight(),
              width: i.outerWidth(),
              position: "absolute",
          })
          d.css(i.offset());
          d.attr("title", i.attr("title"));
          d.tooltip();
          return d;
      });
  </code></pre>
  
  <p>I have used/tried both <code>prop()</code> and <code>attr()</code>, but non of them enters my <code>after()</code> function.</p>
  
  <p>According to <a href="https://stackoverflow.com/a/5995650/405046">Paul Rosania</a> I should use <code>prop()</code>.</p>
  
  <p>Is there another way to accomplish this?</p>
  
  <p><strong>EDIT</strong>: <a href="http://jsfiddle.net/WB6bM/56/" rel="nofollow noreferrer">jsFiddle</a></p>