locked
How can remove readonly attribute from Javascript RRS feed

  • Question

  • User-1355965324 posted

    I have checkbox and input number tag  inside the td . When I  the checkbox is being ticked, I am trying to remove the read only  attribute of the Input number column just after checkbox. Here is my code. Any help would be appreciated

    <td>
    <span><input type="checkbox"  asp-for="@Model.attendanceLogList[i].IsNormalAttendance" onclick="SetHrs(this);" /></span>
    <input type="number" readonly="readonly" placeholder="0.00" style="@(columnstyle);width: 5em"
                                       class="form-control format-text emphrs" asp-for="@Model.attendanceLogList[i].NormalHrs"  />
    </td>
    <script>
     function SetHrs(element) {
            var rowIndex = $(element).closest("tr").attr('id');      
           if ($(element).is(":checked")) {
    $(element).closest.find("input[type=number]").attr("readonly", false);  //  if Ithe checkbox is ticked then input number should not be read only
                
            }
        }
    </script>
    

    Tuesday, May 25, 2021 1:09 PM

Answers

  • User-474980206 posted

    Try

    if ($(element).is(":checked")) {
                $(this).closest('to ').find('input[type=number]').removeAttr('readonly'); 
            }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 25, 2021 4:02 PM
  • User1686398519 posted

    Hi polachan, 

    It looks like you did not choose the right element.

    You can console.log() to print out the element you need to find to check whether it is correct.

    You can modify your code like this:

    if ($(element).is(":checked")) {
          $(element).closest("td").find("input[type=number]").attr("readonly", false);  
    } else {
          $(element).closest("td").find("input[type=number]").attr("readonly", true); 
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 26, 2021 5:40 AM

All replies

  • User753101303 posted

    Hi,

    What if using https://api.jquery.com/removeAttr/ instead to remove this attribute? AFAIK it is taken into account if found regarless of its value.

    Tuesday, May 25, 2021 1:34 PM
  • User-1355965324 posted

    I given the following, still  not working

    if ($(element).is(":checked")) {
                $(this).closest('tr').find('input[type=number]').removeAttr('readonly'); 
            }

    Tuesday, May 25, 2021 2:13 PM
  • User-474980206 posted

    Try

    if ($(element).is(":checked")) {
                $(this).closest('to ').find('input[type=number]').removeAttr('readonly'); 
            }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 25, 2021 4:02 PM
  • User1686398519 posted

    Hi polachan, 

    It looks like you did not choose the right element.

    You can console.log() to print out the element you need to find to check whether it is correct.

    You can modify your code like this:

    if ($(element).is(":checked")) {
          $(element).closest("td").find("input[type=number]").attr("readonly", false);  
    } else {
          $(element).closest("td").find("input[type=number]").attr("readonly", true); 
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 26, 2021 5:40 AM