setting the readonly value in the html table for a specific line at the start of the form

Question

I try to set readonly fields for specific lines where "sth" is set in select box

the code is executed when the page is loaded / at the start of the form

i tried:

.js file

 $(document).ready(function () {


      $(".ecp-row").each(function () {

            var start = $(this).find(".start");
            var end = $(this).find(".end");
            var hours = $(this).find(".gethours");
            var selectboxlist = $(this).find(".selectboxlist").eq(0).val();

            if (selectboxlist === "sth") {



                alert("test");  // it works

                start.readOnly = true;  // it doesnt work
                end.readOnly = true;  // it doesnt work
                hours.readOnly = true;   // it doesnt work
                
                
            }
        });

  });

html

@for (int nr_rows = 0; nr_rows < @ViewBag.sthelse; nr_rows++)
            {
 <tr class="ecp-row">
                    
      <td id="td3" >@Html.TextBoxFor(m => m.Model7[nr_rows].a, new { @class = "start"})</td>
      <td id="td4" >@Html.TextBoxFor(m => m.Model7[nr_rows].b, new { @class = "end" })</td>
      <td id="td5" >@Html.TextBoxFor(m => m.Model7[nr_rows].c, new { @class = "gethours" })</td>
                    
      <td id="td6" >@Html.DropDownListFor(m => m.Model7[nr_rows].sth, new SelectList(Enum.GetValues(typeof(sth))), "  ", new { @class = "selectboxlist" })</td>

</tr>
}

You `start` and other variables in this case is a jquery Object and `start.readOnly = true` is a javascript way of setting the readOnly, so either use `start[0].readOnly = true` or `start.attr("readOnly","true")` — Carsten Løvbo Andersen, Sep 17 '20 at 10:17
Also just a note `td3` and other ids in your `for` loop will be duplicated and an id should always remain unique. — Carsten Løvbo Andersen, Sep 17 '20 at 10:19

score 1 · Answer 1 · answered Sep 17 '20 at 10:23

As stated in the comment, you problem is that you are trying to execute javascript code on a jquery object.

You can either use start[0].readOnly = true; or start.attr("readOnly","true");

Demo

$(document).ready(function() {
  $(".ecp-row").each(function() {
    var start = $(this).find(".start");
    alert("test"); // it works
    //start[0].readOnly = true;
    start.attr("readOnly","true");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="ecp-row">
      <td id="td3"><input class="start" /></td>
    </tr>
  </tbody>
</table>

score 1 · Answer 2 · answered Sep 18 '20 at 08:10

If you want to change readonly,you can use prop or attr:

prop:

var start = $(this).find(".start");
            start.prop("readonly", true);

attr:

var gethours = $(this).find(".gethours");
            gethours.attr("readonly", true);

And here's the difference between them.

demo:

    @for (int nr_rows = 0; nr_rows < @ViewBag.sthelse; nr_rows++)
{
    <tr class="ecp-row">
       
        start<td id="td3">@Html.TextBoxFor(m => m.Model7[nr_rows].a, new { @class = "start" })</td>
        end<td id="td4">@Html.TextBoxFor(m => m.Model7[nr_rows].b, new { @class = "end" })</td>
        gethours<td id="td5">@Html.TextBoxFor(m => m.Model7[nr_rows].c, new { @class = "gethours" })</td>
    </tr>
}
@section scripts{ 
    <script>
        $(function () {
            var start = $(this).find(".start");
            start.prop("readonly", true);
            var gethours = $(this).find(".gethours");
            gethours.attr("readonly", true);
        })
    </script>
}

result:

score 0 · Answer 3 · answered Sep 17 '20 at 13:25

0

your are setting readonly property to true wrongly try instead jquery attr() method

 var start = $(this).find(".start");

 start.attr("readOnly","true");// set readonly to true

answered Sep 17 '20 at 13:25

Saddam

1,174
7
14

setting the readonly value in the html table for a specific line at the start of the form

3 Answers3