title: Can Javascript/jQuery auto-populate a readonly text field?
body: <p>I have an area of my application that requires the user to agree to a statement, and I am using Javascript/jQuery so that when the user selects 'Yes' it automatically enters the date/time into a readonly field. </p>
  
  <p>Although I cannot reproduce it, I am having multiple users tell me that when they select 'Yes', it does not populate the date/time and since the field is readonly they cannot type it in themselves.  </p>
  
  <p>Is there anything in my code that is unconventional that would cause the issues described above in particular browsers?  Can anyone reproduce this on their machines?  </p>
  
  <p>Here is a working example: <a href="http://jsfiddle.net/YL2Wd/" rel="nofollow">http://jsfiddle.net/YL2Wd/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;label&gt;I agree:*&lt;/label&gt;
      &lt;span class="options"&gt;
          &lt;label for="agreement_no"&gt;No&lt;/label&gt;
          &lt;input type="radio" class="required authorization" value="0" id="agreement_no" name="agreement"&gt;
  
          &lt;label for="agreement_yes"&gt;Yes&lt;/label&gt;
          &lt;input type="radio" class="required authorization" value="1" id="agreement_yes" name="agreement"&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="description"&gt;
      Agreement Text
  &lt;/div&gt;
  &lt;div class="question"&gt;
      &lt;label for="authorization_timestamp"&gt;Date/Time*&lt;/label&gt;
      &lt;input type="text" readonly="readonly" maxlength="100" class="authorization_timestamp required" name="authorization_timestamp" id="authorization_timestamp"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$('.authorization[id$="yes"]').on('change', function() {
  
      var dateStr;
  
      if ($(this).val() == 1) {
  
          var now = new Date();
  
          var month = now.getMonth() + 1;
          var day = now.getDate();
          var year = now.getFullYear();
          var h = now.getHours();
          var m = now.getMinutes();
          var s = now.getSeconds();
  
          month = month &lt; 10 ? "0" + month : month;
          day = day &lt; 10 ? "0" + day : day;
          h = h &lt; 10 ? "0" + h : h;
          m = m &lt; 10 ? "0" + m : m;
          s = s &lt; 10 ? "0" + s : s;
  
          dateStr = month + "/" + day + "/" + year + " " + h + ":" + m + ":" + s
      }
  
      $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);
  
  });
  
  $('.authorization[id$="no"]').on('change', function() {
  
      var dateStr;
      dateStr = "";
      $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);
  
  });
  </code></pre>