하나의 jQuery 함수를 사용하여 여러 개의 텍스트 상자에 해당하는 여러 확인란 사용

Question

각 확인란마다 4 개의 텍스트 상자를 구체적으로 나타내는 4 개의 확인란이 있습니다. 해당 확인란을 선택하면 비활성화 된 texbox를 활성화해야합니다. onclick="document.getElementById('txtLrgPrc').disabled=!this.checked;"과 같은 html 태그 자체에서 각 확인란의 onclick 이벤트에 대해 동일한 기능을 작성했습니다.

하지만이 작업은 jQuery를 사용하여 textbox 및 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> 

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> 

또한 체크 박스의 클릭 이벤트를 제거하십시오.

또 다른 해결 방법 : 체크 박스 ("COL-XS-5")에 공통 클래스를 참조하는 jQuery를`click` 이벤트 처리기를 추가하여

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