Making divs or HTML input controls read-only

Making divs or HTML input controls read-only

I have a problem trying to make an entire div or individual HTML input controls on the div read only.

I have a div that looks like to included HTML code and I late call a JavaScript function which runs the included jQuery statements, but it does not work. Does anyone have ideas.

  1. <!-- from  "benefits_application_page.htm" -->
  2. <!-- start: divReadOnlyFields  -->
  3. <div id="divReadOnlyFields ">
     Last Name:  <input name="last_name" type="text" id = "last_name" required/><label id="Label4">   Other Names:</label>
     <input name="oth_names" type="text" style="width: 177px" id = "oth_names" required/>   Email
     Address:   <input name="email" type="text" style="width: 166px" id ="email"/><label id="Label5">   Date
     of Birth:</label><input name="dob" type="date" id = "dob"/><label id="Label6"> </label><br/>  Sex:
     <select id = "sexType">
      <option value ="M">Male</option>
      <option value ="F">Female</option>

  4.  <br/>
    </div> <!-- end: divReadOnlyFields  -->

  5. <!-- jQuery code in same file -->
  6.  $(document).ready(function(){
      $("#divReadOnlyFields > input").attr("readonly", true);
  7. $("#divReadOnlyFields > input").attr("disabled", true);
  8. $("#divReadOnlyFields > select").attr("readonly", true);
  9. });