확인란 선택을 처리하는 단일 함수를 만드는 방법은 무엇입니까?

Question

단일 행을 선택하거나 모든 행을 선택할 때 잘 작동하는이 간단한 선택 상자를 선택하고 있습니다. 그러나 확인란 선택을 처리하는 함수는 하나만 갖고 싶습니다. 현재로서는 customer_name_func, customer_lastname_func 및 customer_email_func라는 3 개의 함수가 있습니다. 누군가 제발 도와 줄 수 있어요?

$(document).ready(function() { 
 

 
    $("#checkAll").change(function() { 
 
    $("input:checkbox").prop('checked', $(this).prop("checked")); 
 
    $(customer_name_func); 
 
    $(customer_lastname_func); 
 
    $(customer_email_func); 
 
    }); 
 

 
    var customer_name_func = function() { 
 
    if ($("#customer-name-checkbox").is(":checked")) { 
 
     $('#customer-name-inputField').prop('disabled', false); 
 
    } else { 
 
     $('#customer-name-inputField').prop('disabled', 'disabled'); 
 
    } 
 
    }; 
 
    $(customer_name_func); 
 
    $("#customer-name-checkbox").change(customer_name_func); 
 

 
    var customer_lastname_func = function() { 
 
    if ($("#customer-lastname-checkbox").is(":checked")) { 
 
     $('#customer-lastname-inputField').prop('disabled', false); 
 
    } else { 
 
     $('#customer-lastname-inputField').prop('disabled', 'disabled'); 
 
    } 
 
    }; 
 
    $(customer_lastname_func); 
 
    $("#customer-lastname-checkbox").change(customer_lastname_func); 
 

 
    var customer_email_func = function() { 
 
    if ($("#customer-email-checkbox").is(":checked")) { 
 
     $('#customer-email-inputField').prop('disabled', false); 
 
    } else { 
 
     $('#customer-email-inputField').prop('disabled', 'disabled'); 
 
    } 
 
    }; 
 
    $(customer_email_func); 
 
    $("#customer-email-checkbox").change(customer_email_func); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="checkbox" id="checkAll" />Select All 
 
    <br/> 
 
    <input type="checkbox" id="customer-name-checkbox" name="customer-name-checkbox" value="yes"> 
 
    <!---echo php customerName value from WS---> 
 
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label> 
 
    <input type="email" name="name" id="customer-name-inputField" /> 
 
    <br/> 
 
    <br/> 
 

 
    <input type="checkbox" id="customer-lastname-checkbox" name="customer-lastname-checkbox" value="yes"> 
 
    <!---echo php customerLastName value from WS---> 
 
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label> 
 
    <input type="email" name="email" id="customer-lastname-inputField" /> 
 
    <br/> 
 
    <br/> 
 

 
    <input type="checkbox" id="customer-email-checkbox" name="customer-email-checkbox" value="yes"> 
 
    <!---echo php customerPhoneNumber value from WS---> 
 
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label> 
 
    <input type="email" name="email" id="customer-email-inputField" /> 
 
    <br/> 
 
    <br/> 
 

 
    <input type="submit" value="Send" /> 
 
</form>

Answer 1

1. 를 사용하여 HTML-5 data-* 속성 요소에 사용자 정보를 저장 : 여기에 잘 작동 내 코드입니다.

   추가 data-target 각 체크 박스이 속성 값을 속성

   data-target="customer-name-inputField" name="customer-name-checkbox" value="yes" 
   

2. 모든 체크 박스로 일반적인 클래스 추가 해당 텍스트 상자 ID를해야한다.

   class="myCheckbox" 
   

3. 공통 클래스를 사용하는 모든 확인란에서 이벤트를 바인딩합니다.

   $('.myCheckbox').change(function() { 
   

4. 이벤트 핸들러 내부 요소 data-* 속성 값을 얻을 수 $(this) 및 data()을 사용합니다.

   $(this).data('target') 
   

5. 사용 trigger('change')은 체크 박스에서 변경 이벤트를 트리거합니다.

라이브 데모 :

$(document).ready(function() { 
 

 
    $("#checkAll").change(function() { 
 
    $('.myCheckbox').prop('checked', this.checked).trigger('change'); 
 
    }); 
 

 
    $('.myCheckbox').change(function() { 
 
    $('#' + $(this).data('target')).prop('disabled', !this.checked); 
 
    }).trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div> 
 
    <input type="checkbox" id="checkAll" />Select All 
 

 
    <input type="checkbox" id="customer-name-checkbox" data-target="customer-name-inputField" name="customer-name-checkbox" value="yes" class="myCheckbox"> 
 
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label> 
 
    <input type="email" name="name" id="customer-name-inputField" /> 
 
    </div> 
 

 
    <div> 
 
    <input type="checkbox" id="customer-lastname-checkbox" data-target="customer-lastname-inputField" name="customer-lastname-checkbox" value="yes" class="myCheckbox"> 
 
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label> 
 
    <input type="email" name="email" id="customer-lastname-inputField" /> 
 
    </div> 
 
    <div> 
 
    <input type="checkbox" id="customer-email-checkbox" data-target="customer-email-inputField" name="customer-email-checkbox" value="yes" class="myCheckbox"> 
 
    <!---echo php customerPhoneNumber value from WS---> 
 
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label> 
 
    <input type="email" name="email" id="customer-email-inputField" /> 
 
    </div> 
 
    <input type="submit" value="Send" /> 
 
</form>

Answer 2

가 자신의 이름을 수정하여 입력 필드의 ID를 받고, 체크 박스에서 작동 하나의 함수를 작성합니다. .each()으로 모두 작업 할 수 있도록이 클래스가 필요한 모든 확인란을 제공하십시오. `) (`FUNCTIONNAME :

$(document).ready(function() { 
 

 
    $("#checkAll").change(function() { 
 
    $(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() { 
 
     enable_disable_input(this); 
 
    }); 
 
    }); 
 

 
    function enable_disable_input(checkbox) { 
 
    var input_id = checkbox.id.replace('-checkbox', '-inputField'); 
 
    $("#" + input_id).prop('disabled', !checkbox.checked); 
 
    } 
 

 
    $(".input_checkbox").change(function() { 
 
    enable_disable_input(this); 
 
    }); 
 

 
    $(".input_checkbox").each(function() { 
 
    enable_disable_input(this); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="checkbox" id="checkAll" />Select All 
 
    <br/> 
 
    <input type="checkbox" id="customer-name-checkbox" class="input_checkbox" name="customer-name-checkbox" value="yes"> 
 
    <!---echo php customerName value from WS---> 
 
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label> 
 
    <input type="email" name="name" id="customer-name-inputField" /> 
 
    <br/> 
 
    <br/> 
 

 
    <input type="checkbox" id="customer-lastname-checkbox" class="input_checkbox" name="customer-lastname-checkbox" value="yes"> 
 
    <!---echo php customerLastName value from WS---> 
 
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label> 
 
    <input type="email" name="email" id="customer-lastname-inputField" /> 
 
    <br/> 
 
    <br/> 
 

 
    <input type="checkbox" id="customer-email-checkbox" class="input_checkbox" name="customer-email-checkbox" value="yes"> 
 
    <!---echo php customerPhoneNumber value from WS---> 
 
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label> 
 
    <input type="email" name="email" id="customer-email-inputField" /> 
 
    <br/> 
 
    <br/> 
 

 
    <input type="submit" value="Send" /> 
 
</form>

참고