チェックボックスの選択を処理する単一の関数を作成する方法は？

私はこの単なるチェックボックスの選択に取り組んでいます。これは、1つの行を選択したり、すべての行を選択してもうまく動作します。しかし、チェックボックスの選択を処理する機能は1つだけです。現時点では、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>

出典

2016-05-31 HenryDev

、内部の '$（ドキュメント）.ready（）'あなただけの通常の関数を呼び出し、 '$（functionNameをを）'を使用する必要はありません。。 – Barmar

利用要素のカスタム情報を格納するためのHTML-5 data-*属性：ここだけで正常に動作し、私のコードです。

は、各チェックボックスをdata-target属性を追加し、この属性の値は、対応するテキストボックスのID
```
data-target="customer-name-inputField" name="customer-name-checkbox" value="yes" 
```
は、すべてのチェックボックスに共通するクラスを追加する必要があります。一般的なクラスを使用して、すべてのチェックボックスに
```
class="myCheckbox" 
```
バインドイベント。
```
$('.myCheckbox').change(function() { 
```
イベントハンドラ内の要素data-*属性値を取得するために$(this)とdata()を使用しています。
```
$(this).data('target') 
```
チェックボックスに変更イベントをトリガする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>

出典

2016-05-31 16:00:05 Tushar

独自の名前を変更することで、入力フィールドの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>

FYI

出典

2016-05-31 16:02:49 Barmar

チェックボックスの選択を処理する単一の関数を作成する方法は？

答えて

関連する問題