Enabling multiple textboxes with a corresponding multiple checkbox using a single jQuery function

Question

I have 4 multiple check boxes which each one of them is specifically correspondent to 4 text-boxes. I need to enable the disabled texbox when the corresponding checkbox is checked. I wrote a same function for each checkbox's onclick event in html tag itself as onclick="document.getElementById('txtLrgPrc').disabled=!this.checked;" .

But I need to automate this by calling a function only once by sending the parameters of textboxes and heckboxes(i.e. id or name,,) to my js file using jQuery. Can anyone help me for refining this please?

Here is the code which I am currently using and it works finely.

jsp page:

<div class="row item-tbl-row" id="addItmChkbxReg">

                  <div class="col-xs-5">
                    <label class="checkbox-inline">
                      <form:checkbox value="regular" class="checkbox sizechkbx" path="size" label="Regular" id="chkReg" onclick="document.getElementById('txtRegPrc').disabled=!this.checked;"/>
                    </label>
                  </div>
                  <div class="col-xs-7">
                    <form:input type="text" class="form-control price" path="price" id="txtRegPrc" disabled="true"/>
                  </div>
                </div>

                <div class="row item-tbl-row" id="addItmChkbxMed">

                  <div class="col-xs-5">
                    <label class="checkbox-inline">
                      <form:checkbox value="medium" class="checkbox sizechkbx" path="size" label="Medium" onclick="document.getElementById('txtMedPrc').disabled=!this.checked;"/>
                    </label>
                  </div>
                  <div class="col-xs-7">
                    <form:input type="text" class="form-control price" path="price" id="txtMedPrc" disabled="true"/>
                  </div>
                </div>

                <div class="row item-tbl-row" id="addItmChkbxLrg">

                  <div class="col-xs-5">
                    <label class="checkbox-inline">
                      <form:checkbox value="large" class="checkbox sizechkbx" path="size" label="Large" onclick="document.getElementById('txtLrgPrc').disabled=!this.checked;"/>
                    </label>
                  </div>
                  <div class="col-xs-7">
                    <form:input type="text" class="form-control price" path="price" id="txtLrgPrc" disabled="true"/>
                  </div>
                </div>

Answer 1

You can automate like the following.

<script type="text/javascript">
    $(document).ready(function () {

        $(".checkbox").click(function () {

            $(this).parent().parent().next().find(".form-control").prop("disabled", !$(this).prop("checked"));
        });
    });
</script>

Also, remove the click event of the checkboxes.

Another solution:

<script type="text/javascript">

    function C(t, textBoxId) {
        $("#" + textBoxId).prop("disabled", !$(t).prop("checked"));
    }
</script>

<form:checkbox value="regular" id="chkReg" onclick="C(this, 'txtRegPrc')"/>