title: Jquery to set all controls in a div to readonly - telerik controls arent readonly
body: <p>Trying to default all controls in a  to readonly but the Telerik ones appear to not want to turn to readonly.</p>
  
  <p>Example HTML</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      @Html.LabelFor(model =&gt; model.Entity.IssueDate, htmlAttributes: new { @class = "control-label col-md-2" })
      &lt;div class="col-md-10"&gt;
          @Html.EditorFor(model =&gt; model.Entity.IssueDate, new { htmlAttributes = new { @class = "form-control" } })                            
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="form-group"&gt;
      &lt;label class="control-label col-md-2"&gt;
          Product
      &lt;/label&gt;
      &lt;div class="col-md-10"&gt;
          @(Html.Kendo().DropDownListFor(m =&gt; m.Entity.ProductId)
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .Filter("contains")
                        .HtmlAttributes(new { @class = "form-control" })
                        .BindTo(new SelectList(Model.Products, "Id", "FullName", Model.Entity.ProductId)))
      &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>and the piece of code </p>
  
  <pre><code>  &lt;script&gt;
      $(document).ready(function () {
  
          if ($("#EventCommand").val() == "detail") {
  
              $(".form-control").prop("readonly", true);
          }
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Inserting the following line appears to work but I want something that is generic enough to handle all controls that are within a div tag (all have the form-control tag).</p>
  
  <pre><code>$("#Entity_ProductId").data("kendoDropDownList").readonly(true);
  </code></pre>
  
  <p>Any idea why the Telerik mvc kendo components don't seem to want to honor the readonly attribute in the same way as the normal html controls.</p>