使用单个 jQuery 函数启用具有相应多个复选框的多个文本框

Question

我有 4 个复选框，每个复选框分别对应 4 个文本框。当相应的复选框被选中时，我需要启用禁用的 texbox。我在 html 标记本身中为每个复选框的 onclick 事件编写了与 onclick="document.getElementById('txtLrgPrc').disabled=!this.checked;" 相同的函数。

但我需要通过使用 jQuery 将文本框和复选框（即 id 或名称）的参数发送到我的 js 文件来仅调用一次函数来自动执行此操作。任何人都可以帮我改进这个吗？

这是我目前正在使用的代码，它运行良好。

jsp 页数：

<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

您可以像下面这样自动化。

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

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

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

另外，去掉复选框的点击事件。

另一种解法：

<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')"/>

使用单个 jQuery 函数启用具有相应多个复选框的多个文本框

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

html

javascript

checkbox

jquery

disabled-input