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

问题描述：

我有4个多个复选框，其中每个复选框都特别对应4个文本框。当相应的复选框被选中时，我需要启用禁用的texbox。我为html标签中的每个复选框的onclick事件编写了一个相同的函数onclick="document.getElementById('txtLrgPrc').disabled=!this.checked;"。使用单个jQuery函数启用具有相应多个复选框的多个文本框

但我需要通过使用jQuery将textboxes和heckboxes（即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>

开始通过添加一个jQuery'click'事件处理常见的类，它引用到你的复选框（ “COL-XS-5”）。如果您无法正常工作，请回复问题。（请确保你了解'event.target'和'this'是如何在事件处理程序中工作的，这是标准读数。） – BobRodes

@BobRodes这是我到目前为止所尝试的 '$（function enableTextbox（chk，txt）{ //选项1 如果（chk.checked == TRUE） txt.disable（假）; //选项2 如果（chk.is（ '：检查'））{$ （TXT） .find（TXT）.attr（ '禁用'，假）; } }）' 在jsp中; '

' 我在搞什么或做错了什么？ – SMash

答

您可以自动如下所示。

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

谢谢，它的工作原理。但我正试图通过在调用复选框的相关函数onclick事件时通过发送参数（如文本框的id）来完成此操作。因为我需要了解jQuery函数如何通过发送参数来处理这些事情 – SMash

我尝试了几个相同的代码，就像你的第二个解决方案。但他们没有工作。我也试过你的第二个解决方案，但它也没有工作。这是我从一个单独的js文件中的jsp页面调用函数的问题吗？ – SMash

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

相关推荐