Question

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

但是我需要通过使用jQuery将文本框和heckbox（即id或name ,,）的参数发送到我的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

您可以像以下一样自动执行。

true

此外，删除复选框的点击事件。

另一种解决方案：

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

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

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

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

1 个答案: