Home/ Questions/Q 3611906
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T21:56:00+00:00

I have a html table with a column of text boxes ( mileage ),

  • 0

I have a html table with a column of text boxes (mileage), all of them are disabled when the page loads, and I need that when user clicks on a check box, the text box for that column should be enabled and become a required field, and then if the user unchecks the checkbox, the textbox on that row must be disabled and the required class removed.
alt text

I already have the function to enable and disable the text boxes (column mileage) when the user clicks on the corresponding checkbox, but it is written in javascript.However, for some reason it only works in IE).

Here is the html code

<tbody>
 <c:forEach items="${list}" var="item">
    <tr>
      <td align="center">
         <input type="checkbox" name="selectItems" value="<c:out value="${item.numberPlate}"/>" onchange="enableTextField(this)" />
      </td>
      <td align="left"><c:out value="${item.numberPlate}"/></td>
      <td align="left"><c:out value="${item.driver.fullName}"/></td>
      <td align="left"><input type="text" name="mileage_<c:out value="${item.numberPlate}"/>" value="" disabled="true"/></td>
     </tr>
  </c:forEach>                       
</tbody>

And the javascript code:

function enableTextField(r)
    {   var node = r.parentNode;
        while( node && node.tagName !== 'TR' ) {
            node = node.parentNode;
        }
        var i=node.rowIndex;

        if(document.form1.selectItems[i-1].checked)
        {   

            document.getElementById('mileage_' + document.form1.selectItems[i-1].value).disabled=false;
        }
        else
        {

            document.getElementById('mileage_' + document.form1.selectItems[i-1].value).value="";
            document.getElementById('mileage_' + document.form1.selectItems[i-1].value).disabled=true;
        }


    }

Now, I know that in order to add or remove dynamically validation rules I have to use: addClass(‘required’); o removeClass(‘required’) ,but I don’t know how to detect whether a check box is selected or not, and based on that ,enable or disable the text box for that row.

I really hope you can help me out with this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Put this in <head> or in a .js file which is included in <head>.

    $(document).ready(function() {
    $("input[name=selectItems]").change(function() {
        $(this).closest("tr").find("input[name^=mileage]").attr("disabled", !this.checked);
    });
});

    Here’s a live demo.

    • 0